"The text-decoration-inset CSS property solves a problem that we've had since the beginning of the web, which is that text decorations such as underlines extend beyond the first and last characters (to the edges of the content box, to be specific), resulting in vertical misalignment. I say it's a problem "we've" had rather sheepishly because maybe you, like some users, don't actually care. But if you're a funny bunny like me (I think "designer" is the technical term) then it most likely drives you crazy."
"However, you can actually trim the decorations as much as you want, which enables us to create some really cool ones and even transition or animate them. Let's take a quick look, shall we? text-decoration-inset basic usage text-decoration-inset, formerly text-decoration-trim, enables us to clip from the ends of the underline or whatever text-decoration-line is computed. This is the syntax: text-decoration-inset: <left-inset> <right-inset>; Yes, this means that we can set different inset values for the left and right sides."
text-decoration-inset trims text decoration lines by clipping their ends from the content-box edges, preventing decorations from extending past first and last characters and correcting vertical misalignment. The property accepts two length values for left and right insets, allowing asymmetric trimming. Relative units such as em tie inset sizes to the computed font-size, enabling consistent scaling. Trimming supports arbitrary amounts, permitting custom styles and transitions or animations. Native decoration features like text-decoration-thickness, text-underline-position, and text-underline-offset remain usable with inset trimming. The property evolved from text-decoration-trim and simplifies precise, reliable decoration alignment compared to manual ::after workarounds.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]