如何删除文本修饰：伪元素下划线？

Question

我text-decoration: underline a，我需要保持这样。但我也试图从伪元素中删除下划线，用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>