Question

是否可以通过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>

Answer 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;
  }

Answer 2

我可以为答案做出贡献，但没有解决方案。而不是h3 a：before：hover，反转伪类，即h3 a：hover：before。这将至少针对：正确的部分。

Answer 3

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

Answer 4

我相信：before伪元素放在元素内但放在它的内容之前。因此，before元素仍然是a的子元素，并将占用该元素中的空间。您看到的下划线不是：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; }

Answer 5

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

Answer 6

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

@see 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 */ }

如何在链接中没有下划线装饰的情况下设置CSS伪元素的样式？

6 个答案: