How to remove an underline on a pseudo-element?

Question

On Chrome and Firefox, if I apply a text-decoration:underline on a tag, by default the underline does not apply to the pseudo element. But on IE it does, and I can\'t remove

Answer 1

As text-decoration: underline; can't be overridden in IE you could use border-bottom: 1px solid green; instead. This can then be overwritten on the :before by setting its border colour to the background colour (in this case white). This will only work on solid colour backgrounds though.

a {		
  color: green;
  display: inline-block;
  padding-left: 9px;
  position: relative;
  text-decoration: none;
}
a:before {
  content: '\203A\00a0';
  display: inline-block;
  left: 0;
  position: absolute;
  top: 0;
}
a:hover {
  border-bottom: 1px solid green;
}
a:hover:before {
  border-bottom: 1px solid white;
}

Hover to check underline