html - 如何不对 :before 中添加的内容应用悬停效果？css

Question

我在 :before 属性中添加 '>' 到链接，但是当应用 :hover 效果时也采用样式 text-decoration: underline;，所以我需要不要在添加的内容中应用效果 :before，我尝试解决这个问题选项

a:before {
  content: '> ';
  position: relative;
  display: inline-block;
  margin-right: 5px;
  pointer-events: none;
}

a:before:hover {
  content: '>';
  pointer-events: none;
}

a:before:hover {
  text-decoration:none;
}

但没有一个有效。

这就是链接在悬停时的行为方式

这是我的代码示例，<a>内部结构<p>是因为内容来自文本编辑器

.super {
    color: rgb(40, 40, 40);
    background-color: rgb(239, 239, 239);
    margin-bottom: 35px;
    padding: 10px;
}

p {
    position: relative;
    word-break: break-word;
    font-size: 17px;
    padding: 0px;
}

a {
    left: 0px;
    display: flex;
    position: relative;
    left: 0;
    display: flex;
    text-decoration: none;
}

a::before {
    content: '> ';
    position: relative;
    display: inline-block;
    margin-right: 5px;
  }
  
  
  a:hover{
    text-decoration:underline;
  }

<div class='super'>
<p>
<a href='https://google.com' target='_blanck'>Example to link</a>
</p>
</div>

标签： htmlcsssass

Answer 1

如果无法工作，您的代码中有两件事会停止：

• 主要原因是使用display:flex
• 你也有不正确的订单，:hover:before但这没关系，因为它display:flex无论如何都不会工作。

使用a元素的默认显示，文本下划线不会影响使用:before伪元素添加的内容。但是 usingdisplay:flex会改变它的显示方式，并导致将文本下划线添加到添加的内容a:before 以及链接文本中：

工作示例：

更新：为了满足您对长链接缩进的新要求，并且无法更改 HTML。

.super {
    color: rgb(40, 40, 40);
    background-color: rgb(239, 239, 239);
    margin-bottom: 35px;
    padding: 10px;
}

p {
    position: relative;
    word-break: break-word;
    font-size: 17px;
    padding: 0px;
}

a {
    position: relative;
    text-decoration: none;
    display: block;
    padding-left: 15px;
}

a:before {
    content: '>';
    position:absolute;
    left:0;
    top: 0;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

a:hover:before{
    text-decoration:none;
}

<div class='super'>
<p>
<a href='https://google.com' target='_blanck'><span>This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link</span></a>
</p>
</div>

另外，仅供参考，使用:hoverand的正确方法:before是:hover:before，但在这种情况下，当您使用时它并没有什么不同，display:flex如下所示：

使用正确 CSSa:hover:before 的 display:flex示例（如您所见，它不起作用）：

.super {
    color: rgb(40, 40, 40);
    background-color: rgb(239, 239, 239);
    margin-bottom: 35px;
    padding: 10px;
}

p {
    position: relative;
    word-break: break-word;
    font-size: 17px;
    padding: 0px;
}

a {
    left: 0px;
    display:flex;
    position: relative;
    text-decoration: none;
}

a::before {
    content: '> ';
    position: relative;
    display: inline-block;
    margin-right: 5px;
    text-decoration:none!important;
}
  
a:hover{
    text-decoration:underline;
  }
a:hover::before {
    text-decoration:none!important;
  }

<div class='super'>
<p>
<a href='https://google.com' target='_blanck'>Example to link</a>
</p>
</div>