某些样式不适用于:after

编码袋熊

你好

我尝试对被添加了风格的内容:aftercolor: ;将被覆盖,但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>

结果 (是图片)

在此处输入图片说明

dfsq

因为伪元素: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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章