This is a blog post explaining the process of fixing an issue related to wavy text decorations in Blink, that ended up with a similar fix in WebKit.
Interesting to read about the work and thought-process behind at-first sight “seemingly simple features” such as the wavy underlines for Spelling and Grammar errors. Be sure to also read the two linked posts by Delan if you want to lift the hood up even further.
This approach however won’t work in Chromium, as only Firefox/Safari support animating text-underline-offset at the moment … but thankfully a tiny amount of CSS Houdini Magic can be sprinkled on top to make Chromium happy 🤩
These lines aren’t injected using ::after or the like, but are done via backgrounds. The key CSS property you’re looking for is display: inline; though, as set on the p elements; without it, it won’t work.