有些风格不起作用:之后
你好
我尝试设置添加: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>