如何在链接内没有下划线装饰的 CSS 伪元素样式？答案

【问题标题】：How to style a CSS pseudo-element without an underline decoration inside a link?如何在链接内没有下划线装饰的 CSS 伪元素样式？
【发布时间】：2013-12-22 16:10:38
【问题描述】：

是否可以通过 CSS 将 :before 伪元素添加到 A html 标签而不显示伪元素的下划线文本装饰？

在下面的标记中，在链接的左侧添加了一个“+”符号，鼠标悬停在该链接的左侧正确地加了下划线，但是即使 css 规则设置为“h3 a”，伪符号“+”也加了下划线:before:hover{ text-decoration:none; }"

<style>
h3 {
    display:block;
    margin:20px auto;
    padding:6px;
    width:85%;
    text-align:left;
    font: 21px 'lucida sans'; color:#444; 
    border-bottom:#ccc 1px solid;
}
h3 a{
    margin:0; padding:8px 4px 0 0;
    display:inline;
    float:right;
    width:auto;
    text-decoration:none;
    font: 14px 'lucida sans';   
}
h3 a:hover{ text-decoration:underline; }
h3 a:before{ content: '+'; margin:0; padding: 4px; }
h3 a:hover:before{ text-decoration:none; }
</style>

<h3>My Title <a href="#">link</a></h3>

【问题讨论】：

对于任何愿意尝试的人......这里有一个 jsbin 可以玩：jsbin.com/oVOhoSej/1/edit。非常有趣的问题，因为我还没有找到解决这个问题的方法。

标签： html css pseudo-element

【解决方案1】：

将 :before 元素设置为 display:inline-block; 将使其采用 text-decoration:none; 样式。

http://jsfiddle.net/KpRg7/3

  h3 a:before{
      display:inline-block;
      content: '+';
      margin:0;
      padding: 4px;
      text-decoration:none;
  }

【讨论】：

它在 FF 和 Chrome 上完美运行，但在 IE 中却不行（我已经在 IE v.11 上测试了 jsfiddle 示例）
我认为 IE 有一个错误（我已经在 IE v.11 上测试了小提琴）；在下面的示例中jsfiddle.net/T4knZ 在第 25 行设置“下划线”（而不是“无”），IE 正确地解释了样式！最后，在@Clint 建议中将 text-decoration 设置为“none”，在 IE 上不再起作用。
我发现这个解决方案更好stackoverflow.com/a/31330454/1214294

【解决方案2】：

好吧，我可以为答案做出贡献，但没有解决方案。代替 h3 a:before:hover，反转伪类，即 h3 a:hover:before。这至少可以正确定位 :before 部分。

【讨论】：

很好的埃里克。没错，这不会使 :before el 采用样式，但它是编写选择器的正确方法。

【解决方案3】：

我对这个问题的唯一解决方案是添加内容作为背景。在 css content:''; 而不是 + 中添加背景图像精灵所需的内容。这样 IE 就不会显示下划线了。

【讨论】：

【解决方案4】：

我相信 :before 伪元素被放置在元素内部但在其内容之前。因此， before 元素仍然是该 a 的子元素，并将占用该元素内的空间。您看到的下划线不是 :before 元素的一部分，而是锚元素。

因此，我认为您必须使用绝对定位将 :before 元素从自然流中取出。

http://jsfiddle.net/KmWL2/

h3 {
    display:block;
    margin:20px auto;
    padding:6px;
    width:85%;
    text-align:left;
    font: 21px 'lucida sans'; color:#444; 
    border-bottom:#ccc 1px solid;
}
h3 a{
    margin:0; padding:8px 4px 0 0;
    display:block;
    float:right;
    width:auto;
    text-decoration:none;
    font: 14px 'lucida sans';
    position: relative;
}
h3 a:hover{ text-decoration:underline; }
h3 a:before{ 
    content: '+'; 
    margin:0; 
    padding: 4px;
    position: absolute;
    left: -15px;
    top: 3px;
}
h3 a:hover:before{ text-decoration:none; }

【讨论】：

【解决方案5】：

你可以在这里查看我的解决方案：http://codepen.io/gml/pen/CEstr IE 的诀窍是您需要在伪元素上设置隐藏高度和溢出。这样下划线就会被截断。

【讨论】：

【解决方案6】：

除了用另一个伪元素模拟下划线效果之外，没有其他解决方案……

@见http://jsfiddle.net/KpRg7/9/

h3 {
    display:block;
    margin:20px auto;
    padding:6px;
    width:85%;
    text-align:left;
    font: 21px 'lucida sans'; color:#444; 
    border-bottom:#ccc 1px solid;
}

h3 a{
    margin:0; padding:8px 4px 0 0;
    display:inline;
    float:right;
    width:auto;
    text-decoration:none;
    font: 14px 'lucida sans';   
}

h3 a:before{ 
    content: '+'; 
    margin:0; 
    padding: 4px;
    position: absolute;
    left: -15px;
    top: 3px;
}

h3 a:hover { position: relative; }

h3 a:hover:after{ content:""; position: absolute; height: 1px;  
    right: 4px; /* depends of the right padding */
    left: 0; /* depends of the left padding */
    background-color: blue; /* depends of the link color */
    top: 22px; /* depends of the overall line-height */ }

【讨论】：