I am looking to add a bottom border with less spacing than default for specific text, creating a look similar to this image:
https://i.sstatic.net/sCQii.png
Unfortunately, it seems the border property cannot achieve this effect. I am experimenting with the :after property to see if it can help. The following code accomplishes what I want but only works for single-line text.
a:after{
margin-top: -40px;
display: block;
content: ' ';
height: 30px;
background: green;
}
When applied to multi-line text, it appears like this: https://i.sstatic.net/eK5zz.png
Is there a way to apply a bottom border or shadow to multiple lines of text using CSS only?
JSFiddle Link: http://jsfiddle.net/ty2ork8b/