Is this how you want it? Your first fiddle doesn't help a lot - is the text meant to overlap the pencil image? Anyway, you can style the pseudo-element itself to have the green border, and remove the browser default styling from the tags which is usually italic, using:
font-style: normal;
It's not considered semantic to use the tag either in this case, just a thought...