css :after content not underlined

Question

To seperate the links in navigation I have set the following

#menu-main li a:after{
    content: " * ";
}

The current item gets additional

text-decoration: underline;

my problem now is, that the " * " is also underlined, but shouldn't

I have tried to add

#menu-main li a:after{
    text-decoration: none !important;
}

but it has no effect

Does anyone have an idea how to keep the text underlined but not the :after content?

Braunschweig

Answer 1

In normal flow, the pseudo element expands the dimensions of the element, and what you see is the underline of the underline of the link itself. Add a:after {text-decoration: line-through;} to verify.

Here's a proposed solution: http://jsfiddle.net/Ronny/Smr38/

Basically, when using position: absolute for the pseudo-elements they no longer affect the dimensions of their parent elements, so the underlines are cut at the right place. You still need to take care of things like pointer events, hover state and focus rings, but I left at least the latter for you to figure out.

Rivi

Answer 2

It's an old question, but it's what you find using Google so I thought I'd share my solution when you need the pseudo-element to contribute to the size of the "parent" and absolute positioning is not an option for some reason:

#menu-main li a:after{
    content: " * ";
    display:inline-block; /* So we can set a width */
    width: 0;
    margin-left: 10px; /* "Size" of the Pseudo-element */
}

Since the width is 0, it does not display a text-decoration. This also involves less code and less dependencies among your styles compared to the accepted answer.

Hacker

Answer 3

if you're in control of markup, you could insert a span in your link

<a href="..."><span>your link</span></a>

and use this css

a { text-decoration: none }
a span { text-decoration: underline }

doing so, the content injected into the :after pseudoelement won't be underlined

otherwise, you may apply the style to li:after (if it is possibile) like so

#menu-main li:after{
    content: " * ";
}

Psychometrics

Adding markup to assist with styling should be avoided. Applying the pseudo class to the list item is an improvement but again, it's twisting with the semantics for the sake of styling. – Miele

how a pseudoelement can affect the semantic? The OP has already placed the * inside another pseudoelement, so original semantic is mantained. – Psychometrics

Fair enough, adding the asterisk to the list item doesn't affect the semantics. Obviously adding a span to assist styling does though. – Miele

Answer 4

In my case i don't even need the width, it just works adding inline-block.

Radiopaque