Question

你好

我尝试为: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>

结果 （这是一张图片）

Answer 1

因为伪元素:after在元素内部而不是外部呈现，所以当然样式化它不会影响外部容器样式：

+--------------------+ | +--------+ | | Content | :after | | | +--------+ | +--------------------+

你需要找到另一种方式。也许可以通过绝对定位在:after外部移动{<1}}：

＆＃13;
＆＃13;
.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; }
＆＃13;
<div class="separate-hyphen"> <a href="link1.extension">Link 1</a> <a href="link2.extension">Link 2</a> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

尝试使用text-decoration: none代替border:none。

Answer 3

尝试这样的事情：

＆＃13;

<html>
  <head>
    <style>
      #hyphen {
        color: red;
        text-decoration: none;
      }

      .linkz
      {
        color: red;
        padding: 5px;
        font-family: verdana;
        font-size: 18px;
      }
      
      #linkcontainer
      {
        border: 3px solid blue;
        padding: 5px;
        border-radius: 11px;
        width: 135px;
        background-color: #6d6;
      }
    </style>
  </head>
  <body>
    <p id="linkcontainer">
        <a href="link1.extension" class="linkz">Link 1</a><a id="hyphen">-</a><a href="link2.extension" class="linkz">Link 2</a>
    </p>
  </body>
</html>

＆＃13;

它适用于我认为你想要的东西。

有些风格不起作用：之后

3 个答案: