How to un-underline a pseudo element of an element that is underlined

Question

I've encountered this issue several times during my work and I've never understood why it happens or how to fix it.

Setup:

<p id="skeeter">Even John Skeet cannot parse HTML with Regex</p>

---

#skeeter { text-decoration: underline; color: blue;}
#skeeter:after { content: "\00bb"; margin-left: 5px; text-decoration: none;}

---

The above has the raquo underlined, when I intend it not to be.

Fiddle: http://jsfiddle.net/scar1z9k/

Answer 1

With this. Only add display: inline-block to :after tag

#skeeter { text-decoration: underline; color: blue;}
#skeeter:after { content: "\00bb"; margin-left: 5px; text-decoration: none; display:inline-block;}