text-strikethrough.css 779 B

123456789101112131415161718192021222324252627
  1. /*
  2. * TextStrikethrough — spring-animated strikethrough line
  3. *
  4. * Draws a line-through from left to right using clip-path on a
  5. * transparent-text overlay that carries the text-decoration.
  6. * Grid stacking (grid-area: 1/1) layers the overlay on the base text.
  7. *
  8. * Key trick: -webkit-text-fill-color hides the glyph paint while
  9. * keeping `color` (and therefore `currentColor` / text-decoration-color)
  10. * set to the real inherited text color.
  11. */
  12. [data-component="text-strikethrough"] {
  13. display: grid;
  14. }
  15. [data-slot="text-strikethrough-line"] {
  16. -webkit-text-fill-color: transparent;
  17. text-decoration-line: line-through;
  18. pointer-events: none;
  19. }
  20. @media (prefers-reduced-motion: reduce) {
  21. [data-slot="text-strikethrough-line"] {
  22. clip-path: none !important;
  23. }
  24. }