Although I've searched on SO, I still haven't found a satisfactory solution to my question.
So here's the issue:
I want to underline an h3 tag with 100% width EXCEPT for the actual text part. It should look like this:
My super title ____________________________________________________
The underlined section needs to be 100% width, so simply adding spaces as in
h3:after {
content:"\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0";
}
won't work since it requires a fixed number of whitespaces.
Additionally, the implementation must be purely CSS without any surrounding DIVs or spans (due to user-generated content from wysiwyg), just a standalone h3 tag.
Is achieving this effect possible using CSS3 alone? If not, I am open to incorporating some JavaScript to make it happen.
UPDATE:
Attached is a screenshot showing the desired outcome: