30 Tailwind CSS Hover Effects
27 / 30

All 30 in 30 Tailwind CSS Hover Effects

  1. 01Tailwind Underline Draw Hover Effect
  2. 02Tailwind Text Glitch Hover Effect
  3. 03Tailwind Letter Spacing Expand Hover Effect
  4. 04Tailwind Gradient Text Reveal Hover Effect
  5. 05Tailwind Split Text Hover Effect
  6. 06Tailwind Neon Glow Text Hover Effect
  7. 07Tailwind Magnetic Liquid Button Hover Effect
  8. 08Tailwind Border Draw Hover Effect
  9. 09Tailwind Shimmer Shine Button Hover Effect
  10. 10Tailwind Fill Wipe Button Hover Effect
  11. 11Tailwind 3D Press Button Hover Effect
  12. 12Tailwind Ripple Button Hover Effect
  13. 13Tailwind 3D Tilt Card Hover Effect
  14. 14Tailwind Card Flip Hover Effect
  15. 15Tailwind Glassmorphism Card Hover Effect
  16. 16Tailwind Spotlight Card Hover Effect
  17. 17Tailwind Slide Reveal Card Hover Effect
  18. 18Tailwind Stack Lift Card Hover Effect
  19. 19Tailwind Zoom Pan Image Hover Effect
  20. 20Tailwind Color Channel Split Hover Effect
  21. 21Tailwind Duotone Image Hover Effect
  22. 22Tailwind Curtain Reveal Image Hover Effect
  23. 23Tailwind Ken Burns Image Hover Effect
  24. 24Tailwind Image Tilt Depth Hover Effect
  25. 25Tailwind Underline Slide Nav Hover Effect
  26. 26Tailwind Highlight Fill Nav Hover Effect
  27. 27Tailwind Strikethrough Hover Link Effect
  28. 28Tailwind Inline Word Swap Hover Effect
  29. 29Tailwind Dot Trail Cursor Hover Effect
  30. 30Tailwind Magnetic Cursor Pull Hover Effect
Pure TailwindMIT licensed

Tailwind Strikethrough Hover Link Effect

Six strikethroughs that draw themselves — solid, hairline, chunky, wavy, dashed and a double line with a staggered second pass. All are mid-height after: bars scaled from zero; only the fill changes.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="thv-27 w-full min-h-svh bg-thv27-bg font-thv27-sans px-8 py-12 flex flex-col items-center justify-center gap-10">
  <p class="text-[0.72rem] tracking-[0.15em] uppercase text-thv27-dim">Strikethrough Hover Links — 6 Styles</p>
  <div class="flex flex-wrap justify-center gap-12">
    <a href="#" class="relative text-[1.35rem] font-semibold text-thv27-ink no-underline rounded-xs transition-colors duration-250 hover:text-thv27-dim focus-visible:text-thv27-dim focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv27-acc after:content-[''] after:absolute after:left-0 after:top-1/2 after:-mt-px after:w-full after:h-0.5 after:bg-thv27-acc after:origin-left after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">Solid Strike</a>
    <a href="#" class="relative text-[1.35rem] font-semibold text-thv27-ink no-underline rounded-xs transition-colors duration-250 hover:text-thv27-dim focus-visible:text-thv27-dim focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-white after:content-[''] after:absolute after:left-0 after:top-1/2 after:-mt-px after:w-full after:h-px after:bg-white/70 after:origin-left after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">Hair-thin Strike</a>
    <a href="#" class="relative text-[1.35rem] font-semibold text-thv27-ink no-underline rounded-xs transition-colors duration-250 hover:text-thv27-amber focus-visible:text-thv27-amber focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv27-amber after:content-[''] after:absolute after:left-0 after:top-[44%] after:-mt-[3px] after:w-full after:h-1.5 after:rounded-[3px] after:bg-thv27-amber/85 after:origin-left after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">Chunky Strike</a>
  </div>
  <div class="flex flex-wrap justify-center gap-12">
    <a href="#" class="relative text-[1.35rem] font-semibold text-thv27-ink no-underline rounded-xs transition-colors duration-250 hover:text-thv27-acc focus-visible:text-thv27-acc focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv27-acc after:content-[''] after:absolute after:left-0 after:top-[54%] after:w-full after:h-1 after:origin-left after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] after:[background:radial-gradient(ellipse_3px_2px_at_3px_2px,#e0055f_100%,transparent)_0/6px_4px_repeat-x,radial-gradient(ellipse_3px_2px_at_3px_0,transparent_100%,#e0055f)_3px/6px_4px_repeat-x] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">Wavy Strike</a>
    <a href="#" class="relative text-[1.35rem] font-semibold text-thv27-ink no-underline rounded-xs transition-colors duration-250 hover:text-thv27-violet focus-visible:text-thv27-violet focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv27-violet after:content-[''] after:absolute after:left-0 after:top-1/2 after:-mt-px after:w-full after:h-0.5 after:origin-left after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] after:[background:repeating-linear-gradient(90deg,#7c6af7_0,#7c6af7_6px,transparent_6px,transparent_10px)] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">Dashed Strike</a>
    <a href="#" class="relative text-[1.35rem] font-semibold text-thv27-ink no-underline rounded-xs transition-colors duration-250 hover:text-thv27-sky focus-visible:text-thv27-sky focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv27-sky before:content-[''] before:absolute before:left-0 before:top-[42%] before:w-full before:h-[1.5px] before:bg-thv27-sky before:origin-right before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] after:content-[''] after:absolute after:left-0 after:top-[56%] after:w-full after:h-[1.5px] after:bg-thv27-sky after:origin-left after:scale-x-0 after:transition-transform after:duration-300 after:delay-[60ms] after:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 hover:after:scale-x-100 focus-visible:before:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:before:transition-none motion-reduce:after:transition-none">Double Strike</a>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-thv27-bg: #0c0c0f;
  --color-thv27-bg: oklch(0.13 0.01 285);
  --color-thv27-ink: #dddddd;
  --color-thv27-ink: oklch(0.88 0 0);
  --color-thv27-dim: #8e8e96;
  --color-thv27-dim: oklch(0.65 0.01 285);
  --color-thv27-acc: #e0055f;
  --color-thv27-acc: oklch(0.58 0.24 3);
  --color-thv27-amber: #f7a600;
  --color-thv27-amber: oklch(0.78 0.17 72);
  --color-thv27-violet: #7c6af7;
  --color-thv27-violet: oklch(0.62 0.2 285);
  --color-thv27-sky: #55ccff;
  --color-thv27-sky: oklch(0.79 0.13 227);
  --font-thv27-sans: 'Space Grotesk', system-ui, sans-serif;
}

.thv-27 {
  width: 100%;
  min-height: 100svh;
}

.thv-27 ::selection {
  background: var(--color-thv27-acc);
  color: #fff;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-thv27-bg: #0c0c0f;
  --color-thv27-bg: oklch(0.13 0.01 285);
  --color-thv27-ink: #dddddd;
  --color-thv27-ink: oklch(0.88 0 0);
  --color-thv27-dim: #8e8e96;
  --color-thv27-dim: oklch(0.65 0.01 285);
  --color-thv27-acc: #e0055f;
  --color-thv27-acc: oklch(0.58 0.24 3);
  --color-thv27-amber: #f7a600;
  --color-thv27-amber: oklch(0.78 0.17 72);
  --color-thv27-violet: #7c6af7;
  --color-thv27-violet: oklch(0.62 0.2 285);
  --color-thv27-sky: #55ccff;
  --color-thv27-sky: oklch(0.79 0.13 227);
  --font-thv27-sans: 'Space Grotesk', system-ui, sans-serif;
}

.thv-27 {
  width: 100%;
  min-height: 100svh;
}

.thv-27 ::selection {
  background: var(--color-thv27-acc);
  color: #fff;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;800&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • The vertical-centring arithmetic (top-1/2 plus a negative half-height margin) is now two adjacent utilities rather than two properties in a rule you have to read twice.
  • UI change from the CSS original: every strike fires on focus-visible: with a ring, and the hover text colours were raised so none of them drop below 4.5:1 while struck through.
  • The wavy fill is the one place the source's clever double-radial-gradient trick survives verbatim — inside a single arbitrary value.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Strikethrough Hover Link Effect
Source: https://codefronts.com/motion/tailwind-css-hover-effects/tailwind-strikethrough-hover-link-effect/

Six strikethroughs that draw themselves — solid, hairline, chunky, wavy, dashed and a double line with a staggered second pass. All are mid-height after: bars scaled from zero; only the fill changes.
## HTML
```html
<section class="thv-27 w-full min-h-svh bg-thv27-bg font-thv27-sans px-8 py-12 flex flex-col items-center justify-center gap-10">
  <p class="text-[0.72rem] tracking-[0.15em] uppercase text-thv27-dim">Strikethrough Hover Links — 6 Styles</p>
  <div class="flex flex-wrap justify-center gap-12">
    <a href="#" class="relative text-[1.35rem] font-semibold text-thv27-ink no-underline rounded-xs transition-colors duration-250 hover:text-thv27-dim focus-visible:text-thv27-dim focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv27-acc after:content-[''] after:absolute after:left-0 after:top-1/2 after:-mt-px after:w-full after:h-0.5 after:bg-thv27-acc after:origin-left after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">Solid Strike</a>
    <a href="#" class="relative text-[1.35rem] font-semibold text-thv27-ink no-underline rounded-xs transition-colors duration-250 hover:text-thv27-dim focus-visible:text-thv27-dim focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-white after:content-[''] after:absolute after:left-0 after:top-1/2 after:-mt-px after:w-full after:h-px after:bg-white/70 after:origin-left after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">Hair-thin Strike</a>
    <a href="#" class="relative text-[1.35rem] font-semibold text-thv27-ink no-underline rounded-xs transition-colors duration-250 hover:text-thv27-amber focus-visible:text-thv27-amber focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv27-amber after:content-[''] after:absolute after:left-0 after:top-[44%] after:-mt-[3px] after:w-full after:h-1.5 after:rounded-[3px] after:bg-thv27-amber/85 after:origin-left after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">Chunky Strike</a>
  </div>
  <div class="flex flex-wrap justify-center gap-12">
    <a href="#" class="relative text-[1.35rem] font-semibold text-thv27-ink no-underline rounded-xs transition-colors duration-250 hover:text-thv27-acc focus-visible:text-thv27-acc focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv27-acc after:content-[''] after:absolute after:left-0 after:top-[54%] after:w-full after:h-1 after:origin-left after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] after:[background:radial-gradient(ellipse_3px_2px_at_3px_2px,#e0055f_100%,transparent)_0/6px_4px_repeat-x,radial-gradient(ellipse_3px_2px_at_3px_0,transparent_100%,#e0055f)_3px/6px_4px_repeat-x] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">Wavy Strike</a>
    <a href="#" class="relative text-[1.35rem] font-semibold text-thv27-ink no-underline rounded-xs transition-colors duration-250 hover:text-thv27-violet focus-visible:text-thv27-violet focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv27-violet after:content-[''] after:absolute after:left-0 after:top-1/2 after:-mt-px after:w-full after:h-0.5 after:origin-left after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] after:[background:repeating-linear-gradient(90deg,#7c6af7_0,#7c6af7_6px,transparent_6px,transparent_10px)] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">Dashed Strike</a>
    <a href="#" class="relative text-[1.35rem] font-semibold text-thv27-ink no-underline rounded-xs transition-colors duration-250 hover:text-thv27-sky focus-visible:text-thv27-sky focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv27-sky before:content-[''] before:absolute before:left-0 before:top-[42%] before:w-full before:h-[1.5px] before:bg-thv27-sky before:origin-right before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] after:content-[''] after:absolute after:left-0 after:top-[56%] after:w-full after:h-[1.5px] after:bg-thv27-sky after:origin-left after:scale-x-0 after:transition-transform after:duration-300 after:delay-[60ms] after:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 hover:after:scale-x-100 focus-visible:before:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:before:transition-none motion-reduce:after:transition-none">Double Strike</a>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-thv27-bg: #0c0c0f;
  --color-thv27-bg: oklch(0.13 0.01 285);
  --color-thv27-ink: #dddddd;
  --color-thv27-ink: oklch(0.88 0 0);
  --color-thv27-dim: #8e8e96;
  --color-thv27-dim: oklch(0.65 0.01 285);
  --color-thv27-acc: #e0055f;
  --color-thv27-acc: oklch(0.58 0.24 3);
  --color-thv27-amber: #f7a600;
  --color-thv27-amber: oklch(0.78 0.17 72);
  --color-thv27-violet: #7c6af7;
  --color-thv27-violet: oklch(0.62 0.2 285);
  --color-thv27-sky: #55ccff;
  --color-thv27-sky: oklch(0.79 0.13 227);
  --font-thv27-sans: 'Space Grotesk', system-ui, sans-serif;
}

.thv-27 {
  width: 100%;
  min-height: 100svh;
}

.thv-27 ::selection {
  background: var(--color-thv27-acc);
  color: #fff;
}
```

How this works

Position is the fiddly part. A strike sits at top-1/2 minus half the line height — after:-mt-px for a 2px bar. Tailwind's negative margin utilities express that directly, and the offset stays next to the height it depends on.

Texture is background, not border. Dashed and wavy strikes are repeating gradients on the bar, which gives sub-pixel control that border-style: dashed does not.

The double pass is one delay. Two bars, opposite origins, the second with delay-[60ms] so the lines cross rather than arrive together.

Make it yours

  • Nudge the line onto cap height by changing after:top-1/2 to after:top-[44%].
  • Thickness and colour are two utilities: after:h-1 after:bg-thv27-amber.
  • Restyle the dash rhythm by editing the repeating gradient's stops.

Gotchas — read before shipping

  • Strikethrough reads as "deleted" — do not use it on links that still work, or use it only as a hover flourish as here.
  • after:-mt-px only centres a 2px bar; a 6px bar needs -mt-[3px].
  • If you want the semantic meaning, use <s> or <del> — a pseudo-element line is decoration, invisible to assistive technology.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Pseudo-elements and gradients only; the floor is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

transformstw ↗transition delaytw ↗:focus-visibletw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →