css:内容未加下划线后

Question

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

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

当前项目获得额外的

text-decoration: underline;

我现在的问题是,"*"也有下划线,但不应该

我试过补充一下

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

但它没有效果

有没有人知道如何保持文字下划线但不是:内容后？

Answer 1

在正常流程中,伪元素会扩展元素的尺寸,您看到的是链接本身下划线的下划线.添加a:after {text-decoration: line-through;}以验证.

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

基本上,当使用position: absolute伪元素时,它们不再影响其父元素的尺寸,因此在正确的位置切割下划线.你仍然需要处理像指针事件,悬停状态和聚焦环这样的事情,但我至少留下了后者让你弄明白.