有些风格不起作用：之后

时间：2015-09-26 12:42:35

标签： html css

你好

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

结果 （这是一张图片）

enter image description here

3 个答案:

答案 0 :(得分：5)

因为伪元素: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;

答案 1 :(得分：0)

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

答案 2 :(得分：0)

尝试这样的事情：

＆＃13;
＆＃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;
＆＃13;
＆＃13;

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

相关问题
最新问题