CSS :after伪元素的内容未被下划线。

Question

为了在导航栏中分离链接，我设置了以下内容。

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

当前项目会获得额外的内容。

text-decoration: underline;

我的问题是，“*”也被下划线了，但实际上不应该。

我尝试添加：

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

但它没有任何效果

有人知道如何让文本保持下划线但不包括:after内容吗？

- obs

Answer 1

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

这里提供了一个解决方案：http://jsfiddle.net/Ronny/Smr38/ 基本上，在伪元素使用position: absolute时，它们不再影响其父元素的尺寸，因此下划线被正确地截断。您仍然需要注意指针事件、悬停状态和焦点环，但至少我留给您后面一个自己处理。

- Ronny

Answer 2

这是一个老问题，但当你需要伪元素来影响“父级”大小且绝对定位不可用时，以下是我的解决方案。

#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。 与接受的答案相比，这还涉及更少的代码和样式之间的依赖。

- Anpan

Answer 3

如果您对标记具有控制权，可以在链接中插入一个span。

<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: " * ";
}

- Fabrizio Calderan

---

应避免添加标记以帮助样式设计。将伪类应用于列表项是一种改进，但再次为了样式而扭曲了语义。 - daddywoodland

伪元素如何影响语义？原始发布者已经将 * 放置在另一个伪元素中，因此保留了原始语义。 - Fabrizio Calderan

好的，将星号添加到列表项中不会影响语义。但是，显然添加一个 span 来辅助样式会影响语义。 - daddywoodland

Answer 4

对于我来说，不需要宽度，只需添加inline-block即可解决问题。

- Paul Wellner Bou