css - css ：在内容没有下划线之后

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

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

这是一个老问题，但这是您使用 Google 发现的问题，所以我想当您需要伪元素来增加“父”的大小并且由于某种原因绝对定位不是一个选项时，我会分享我的解决方案：

#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

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