CSS :after content not underlined

Question

为了分隔导航中的链接，我设置了以下内容

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

当前元素获得额外

text-decoration: underline;

我现在的问题是，“*”也带有下划线，但不应该

我已经尝试添加

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

但是没有效果

有谁知道如何让文本加下划线而不是 :after 内容？

Answer 1

在正常流程中，伪元素扩展了元素的维度，你看到的是链接本身下划线的下划线。添加 a:after {text-decoration: line-through;} 进行验证。

这是一个建议的解决方案:http://jsfiddle.net/Ronny/Smr38/

基本上，当对伪元素使用 position: absolute 时，它们不再影响其父元素的尺寸，因此下划线在正确的位置被切断。您仍然需要处理诸如指针事件、悬停状态和聚焦环之类的事情，但我至少将后者留给您解决。