你好
我尝试对被添加了风格的内容:after
,color: ;
将被覆盖,但text-decoration: ;
不起作用。
code.html
<html>
<head>
<style>
.separate-hyphen *:not(:last-child):after {
content: " -\00a0";
text-decoration: none;
color: red;
}
</style>
</head>
<body>
<div class="separate-hyphen">
<a href="link1.extension">Link 1</a>
<a href="link2.extension">Link 2</a>
</div>
</body>
</html>
结果 (是图片)
因为伪元素:after
是在元素内部而不是外部渲染的,所以样式设计当然不会影响外部容器样式:
+--------------------+
| +--------+ |
| Content | :after | |
| +--------+ |
+--------------------+
您需要找到另一种方法。也许:after
通过绝对定位在视觉上移出其容器:
.separate-hyphen *:not(:last-child) {
margin-right: 10px;
}
.separate-hyphen *:not(:last-child):after {
content: " -\00a0";
text-decoration: none;
color: red;
position: absolute;
padding: 0 5px;
}
<div class="separate-hyphen">
<a href="link1.extension">Link 1</a>
<a href="link2.extension">Link 2</a>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句