css underlining/overlining (letter sniffing required)

[Ashtagon]

I’m looking for a way to underline/overline specific letters in a word, without using any additional html.

<div class="fancyline">Just some text, you know?</div>

My hope is to have an option to underline all letters except those which have “fallers” (ie. no underline for gjpqy) and/or to overline all letters except those which have “risers” (ie. no overline for bdfhklt or any capital letter). This obviously requires a way to “sniff” for individual letters inside the <div>, but I’m not sure how, or even if this is possible.

[Josh]

It’s possible, using regular expressions and some trickery, but probably isn’t going to be easy.

What I’d probably do is set up a regex to match letters with fallers, then wrap them in a span to isolate them, and apply the appropriate classes.

I tinkered with it for a bit on CodePen and couldn’t quite get it working the way I wanted, but I think I may have been overcomplicating it a bit.

[Author]

Posts