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

【问题标题】：css :after content not underlinedcss ：在内容没有下划线之后
【发布时间】：2012-09-24 09:09:28
【问题描述】：

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

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

当前项目获得额外的

text-decoration: underline;

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

我已经尝试添加

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

但是没有效果

有没有人知道如何在文本中添加下划线而不是 :after 内容？

【问题讨论】：

标签： css pseudo-class underline text-decorations css-content

【解决方案1】：

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

【讨论】：

【解决方案2】：

这是一个老问题，但这是您使用 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。与接受的答案相比，这还涉及更少的代码和更少的样式之间的依赖关系。

【讨论】：

【解决方案3】：

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

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

基本上，当对伪元素使用position: absolute 时，它们不再影响其父元素的尺寸，因此下划线在正确的位置被剪切。你仍然需要处理诸如指针事件、悬停状态和焦点环之类的事情，但我至少留下了后者让你弄清楚。

【讨论】：

【解决方案4】：

如果您可以控制标记，则可以在链接中插入跨度

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

【讨论】：

应避免添加标记以帮助样式化。将伪类应用于列表项是一种改进，但同样，为了样式，它会扭曲语义。
伪元素如何影响语义？ OP 已经将* 放在另一个伪元素中，因此保留了原始语义。
很公平，将星号添加到列表项不会影响语义。显然，添加一个跨度来辅助样式确实可以。