CODEWITHSUNDEEP
css
Ivan Topić
Ivan Topić

Reputation: 3185

How to remove text-decoration: underline from pseudoelement?

I have text-decoration: underline on a and I would need to keep it like that. But I am also trying to remove the underline from the pseudoelement, overriding it with text-decoration: none !important; seems to have no effect. Can something be done about it?

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>

Upvotes: 0

Views: 485

Answers (1)

Tyler Roper
Tyler Roper

Reputation: 21672

Your pseudoelement is just an inline text node, which can't really be modified too easily without changing it's display type. Add display: inline-block; - this should allow you to manipulate it independently.

a {
  text-decoration: underline;
}
a::before {
  content: '#';
  text-decoration: none !important;
  display: inline-block;
}
<ul>
  <li>
    <a href="#">asdf</a>
  </li>
</ul>

Upvotes: 3

Related Questions