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时，它们不再影响其父元素的尺寸，因此在正确的位置剪切下划线。你仍然需要处理诸如指针事件，悬停状态和聚焦环之类的事情，但我至少留下了后者让你弄明白。

Answer 2

如果您控制了标记，则可以在链接中插入范围

<a href="..."><span>your link</span></a>

并使用此css

a { text-decoration: none }
a span { text-decoration: underline }

这样做，注入:after伪元素的内容不会加下划线

否则，您可以将样式应用于li:after（如果可能的话），如此

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

Answer 3

有些老问题，但这是你用谷歌找到的东西，所以当你需要伪元素来贡献“父母”的大小时，我想我会分享我的解决方案，绝对定位不是一些选择原因是：

#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 */
}

由于宽度为0，因此不会显示text-decoration。与接受的答案相比，这样还可以减少代码和较少的依赖关系。

Answer 4

在我的情况下，我甚至不需要宽度，它只是添加内联块。

css：内容未加下划线后

4 个答案: