css：内容未加下划线后

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

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

当前项目获得额外的

text-decoration: underline;

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

我试过补充一下

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

但它没有效果

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

最佳答案

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

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

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