个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
你好
我尝试为使用 :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>
result (这是一张图片)
最佳答案
因为伪元素 :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>关于html - 某些样式不适用于 :after，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32797304/
24
4
0
我是一名优秀的程序员,十分优秀！