text-decoration-inset is as a filler for text decorations | CSS tricks

The text-decoration-inset The CSS property solves a problem we’ve had since the dawn of the web, namely 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 that ‘we’ have 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), it’ll probably drive you crazy.

That said, it’s not a problem I’ve tried to solve because the juice just isn’t worth it. The best solution is probably text-decoration: none And ::after with a custom background, but this can be a bit finicky and I prefer to use all the features that come with native text decorations, such as text-decoration-thickness, text-underline-position (which allows us to change the position of the underline relative to the font’s internal statistics, e.g. the baseline), and text-underline-offset (which determines the offset from That position).

So, how are you? text-decoration-inset work? Well, if I crop an underline just enough so that it’s vertically aligned with the text, I end up with this instead (this only works in Firefox 146, by the way):

However, you can crop the decorations as much as you want, which allows us to create really cool decorations and even transfer or animate them. Let’s take a quick look, shall we?

text-decoration-inset basic use

text-decoration-inset, earlier text-decoration-trimallows us to cut from the ends of the underline or whatever text-decoration-line is calculated. This is the syntax:

text-decoration-inset:  ;

Yes, this means we can set different bet values ​​for the left and right sides.

These values ​​should be s, but we can use relative lengths, like em units, which are relative to the calculated ones font-size. So if the font-size changes, the inserts scale accordingly. For example, in the demo above 0.076em (which I set as the left bet) means 7.6% of the calculated value font-sizeand that is the value that causes the left insert to line up with the left side rod of the letter “N” and other left stems. This value has been determined experimentally, but only needs to be determined once for each font.

For example, if that first letter was W? Yes, then the bet would not be aligned, so it is not a perfect solution. I’d say it’s suitable for when you know what the content will be.

Perhaps the W3C will come up with a solution for vertically aligning text decorations and multiple lines of text both accurately and automatically. Until then, this is still a cool solution that allows us to create these kinds of perfectly aligned effects (this demo uses an overline And an underline, and lots of it text-decoration-thickness Naturally):

Animate text-decoration-inset

text-decoration-inset is more interesting when we start thinking about transitions/animations. We often animate underlines, or should I say faux ::after underlined, but with text-decoration-inset we can do it naturally. In the example below, I multiply the inserts by ten :hover. Nothing too crazy, but remember that we can only use it values, so try to use em units, or at least test the text with different font sizes.

Again, Firefox 146+ is currently required:

a {
  transition: 300ms;
  text-decoration-inset: 0.046em 0.009em;

  &:hover {
    text-decoration-inset: calc(0.046em * 10);
  }
}

This next demo gets a bit more ambitious and uses CSS @keyframes animation to create that shooting star underline effect. How it works is that we push the left insert all the way to the other side – but It’s just, remember? We can’t use it 100% here, so instead I determined that the width of the element is 4.5em and used that as the value instead (the more accurate we are, the better the animation or transition). Check the code comments for a full explanation:

a {
  /*
    The value at the start and end of the
    animation, as well as the default value
  */
  text-decoration-inset: 0.046em 0.009em;

  &:hover {
    animation: 1s next-level;
  }
}

@keyframes next-level {
  /* By half-way through the animation... */
  50% {
    /*
      ...the left inset has shifted 4.5em, 
      which is the full width of the element
    */
    text-decoration-inset: 4.5em 0.009em;

    /* It’s faded out as well */
    text-decoration-color: transparent;
  }

  /* Immediately after that... */
  50.999% {
    /* ...both insets are set to the left */
    text-decoration-inset: 0.046em 4.5em;
  }

  /* Then it animates back to the default value */
}

General, text-decoration-inset is a nice feature. It’s not without its flaws, but no feature ever is. Personally, anything that helps me naturally refine a detail is very welcome, and it is text-decoration-inset we can refine two of them: the alignment of the text decoration (relative to the text) and the transition or animation of the text decoration.