css - 如何删除文本装饰 : underline from pseudoelement?

Question

我在 a 上有 text-decoration: underline，我需要保持这样。但我也试图从伪元素中删除下划线，用 text-decoration: none !important; 覆盖它似乎没有效果。可以做些什么吗？

http://codepen.io/anon/pen/yMzJoZ

a {
  text-decoration: underline;
}
a:before {
  content: '#';
  text-decoration: none !important;
}

<ul>
  <li>
    <a href="#">asdf</a>
  </li>
</ul>
    

Answer 1

你的伪元素只是一个内联文本节点，如果不改变它的显示类型，就不能太容易地修改它。添加 display: inline-block; - 这应该允许您独立操作它。

a {
  text-decoration: underline;
}
a::before {
  content: '#';
  text-decoration: none !important;
  display: inline-block;
}

<ul>
  <li>
    <a href="#">asdf</a>
  </li>
</ul>