packages/ui/src/components/text-strikethrough.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/*
 * TextStrikethrough — spring-animated strikethrough line
 *
 * Draws a line-through from left to right using clip-path on a
 * transparent-text overlay that carries the text-decoration.
 * Grid stacking (grid-area: 1/1) layers the overlay on the base text.
 *
 * Key trick: -webkit-text-fill-color hides the glyph paint while
 * keeping `color` (and therefore `currentColor` / text-decoration-color)
 * set to the real inherited text color.
 */

[data-component="text-strikethrough"] {
  display: grid;
}

[data-slot="text-strikethrough-line"] {
  -webkit-text-fill-color: transparent;
  text-decoration-line: line-through;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-slot="text-strikethrough-line"] {
    clip-path: none !important;
  }
}