HP. HP. - 2 months ago 6
CSS Question

pseudo-element insert height into Div with text

I put down an example below that I have trouble with:

<div class="text1">Text 1</div>
<div class="text2">Text 2</div>


Link: http://jsfiddle.net/qhoc/SQpdu/5/

Text 1
has pseudo-element but the height being adjusted with the pseudo-element height.

Requirements:

a.
Text 1
height same as
Text 2
height

b. The red rectangle in the middle of the button.

c. The text must have space around them

d. Everything has to be
position:relative
, at least not
absolute
or
fixed
because this is just a button that could be placed anywhere.

I could just (a) remove
padding: 6px 12px;
and add
height: 30px;
but then my text won't be in the middle with space around it OR (b) add another inner
div
within
Text 1
and make that the red rectangle but I rather not add
div
.

Is there a way to work around this?

UPDATE: I changed the correct link and clarify the requirements.

Answer

I don't know what exactly you want but try this maybe helpful

.text1, .text2 {
    width: 200px;
    padding: 8px 12px;
    display:block;
    background-color: gray;
    margin: 5px;
    height:20px;
}
.text1{
    height:28px;
   padding:0px 12px 8px 12px;
}
.text1:before {
    content:"";
    background: red;
    display: block;
    position: relative;
    width: 20px;
    height: 10px;
    left: 110px;
    top: 15px;
}
‚Äč

DEMO

Comments