ptriek ptriek - 1 year ago 107
CSS Question

prevent :after element from wrapping to next line

I have this HTML:

<li class="completed"><a href="#">I want the icon to stay on the same line as this last <strong>word</strong></li>

I'm appending an icon using the :after pseudo element:

ul li.completed a:after {
background:transparent url(img.png) no-repeat;
content: '';
width: 24px;
height: 16px;

The problem: if the available width is too small, the icon wraps to the next line. I would want it to stay on the same line as the last word of the link it's appended to:

enter image description here

Is this doable, without adding 'nowrap' to the entire link (I want the words to wrap, just not the icon).

See jsFiddle here.

Answer Source

you can add the image to the last word instead. that will make it break together.

add a class to word <strong class="test">word</strong>

and .test:after { ...

the trick is also to make that class to be inline-block

and if you want to keep the underline see this.

add text-decoration:inherit;

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download