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?

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.

Answer 2

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: " * ";
}

Answer 3

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.

Answer 4

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