CodeMan CodeMan - 2 months ago 16
CSS Question

How to remove underline in css for anchors pseudo element in IE

How to remove

text-decoration: underline
for CSS pseudo element in Internet Explorer?

The
+
icon has no underline in other browsers (like Google Chrome), but in Internet Explorer the
+
icon is underlined. How to remove the underline for Internet Explorer?

The Code (https://jsfiddle.net/u5m067xq/4/):



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

<h3><a href="#">link</a></h3>




Answer

This code is working as you expected. Default styling of the a tag is text-decoration: underline. You will have to set it none.

span {
  text-decoration: underline;
}
h3 a:before {
  display: inline-block;
  content: '+';
  margin: 0;
  padding: 4px;
  text-decoration: none;
}
a {
  text-decoration: none;
}
<h3><a href="#"><span>link</span></a></h3>