Question

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 1

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