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.