Question

I have a h3 tag with :before (a small square) and as :after I would like a line that extends for the rest of width.

both the :before and the :after are set to display:inline-block , so that I can set the width and height.

setting the width:100% for the :after breaks into a new line

just take a look here

http://jsfiddle.net/CTd2w/81/

p.s. I’m fine with a JavaScript solution

Answer 1

Here’s a solution that doesn’t use :before and :after. See: http://jsfiddle.net/Wexcode/CTd2w/83/

HTML:

<h3><span>Aktuell</span></h3>

CSS:

h3 {
    border: 0px solid #860d0f;
    border-bottom-width: 1px;
    height: 13px;
}
span {
    background: #fff url(images/logo_square.jpg) 0 50%;
    font-size: 14px;
    color: #860d0f;
    text-transform: uppercase;
    padding: 0 5px 0 14px;
}