CSS：后内容没有下划线

要单独在导航中的链接，我设置了以下CSS：后内容没有下划线

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

当前项目获得额外

text-decoration: underline;

我现在的问题是，该“*”是还强调，但不应

我已尝试添加

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

但它没有效果

有没有人有一个想法如何保持文本下划线，但不是：内容后？

来源

2012-10-03 oliverspies

在正常流程中，伪元素扩展了元素的尺寸，您看到的是链接下划线的下划线本身。添加进行验证。

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

基本上，使用position: absolute因为他们不再影响他们的父元素的尺寸伪元素时，这样的下划线是在正确的地方切割。你仍然需要照顾指针事件，悬停状态和聚焦环等事情，但我至少留下了后者，以供你弄清楚。

来源

2012-10-03 13:19:05 Ronny

这对我来说是完美的;谢谢 – oliverspies

这在Chrome中可用，但在IE（甚至10）中不起作用。 – Puzbie

，如果你在标记的控制的时候，你可以在你的链接

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

插入一个跨度和使用CSS

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

这样做，注入:after pseudoelement韩元内容不要加下划线

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

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

来源

2012-10-03 12:49:48 fcalderan

应避免添加标记以协助造型。将伪类应用于列表项是一种改进，但它又一次为了样式而扭曲了语义。 – daddywoodland

伪元素如何影响语义？ OP已经将'*'放在另一个伪元素中，所以原始语义被消除了。 – fcalderan

足够公平，将星号添加到列表项不会影响语义。不过，显然增加一个跨度来协助造型。 – daddywoodland

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

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

来源

2015-07-13 09:43:40 Anpan

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

来源

2015-08-25 12:06:36

CSS：后内容没有下划线

回答

相关问题