html – 如何在链接中没有下划线装饰的CSS伪元素的样式？

发布时间：2020-12-14 23:49:34 所属栏目：资源来源：网络整理

导读：可以通过CSS将伪元素添加到A html标签中,而不显示伪元素的下划线文本装饰？在下面的标记中,链接左侧添加了一个“”符号,即鼠标悬停正确的下划线,即使css规则设置为“h3 a：before：hover { text-decoration：none;}“ styleh3 { display:block; margin:20px

可以通过CSS将伪元素添加到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>

解决方法

设置：before元素显示：inline-block;将使文字装饰：无;样式.

http://jsfiddle.net/KpRg7/3

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!