extend :after inline-block for the rest of the element

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;
}

Answer 2

This is a kinda hacky JavaScript/jQuery solution, but it works.

http://jsfiddle.net/CTd2w/82/

var h3AfterCalculatedWidth = 
    $('h3').width()        /* total h3 width */
    - $('h3 span').width() /* nested span to determine text width */
    - 14                   /* :before width + margin */ 
    - 5                    /* :after margin */;

$('head').append('<style' + '>h3:after {width: ' + h3AfterCalculatedWidth + 'px!important}<' + '/style>');

!important should be unnecessary but included it anyway

Answer 3

When you set display:inline-block on an element, the width of that element becomes as big as it needs to be to format the element, unless the element sets its width, in which case that algorithm doesn't apply - you set the width, that's what it is. Look up "shrink to fit algorithm" in the CSS spec for full details. So when you say width:100% you guarantee a line break.

Not sure if you can solve this problem ...