Why use a ::after pseudo-element instead of text-decoration for the underline?

text-decoration-line: underline gives you almost no control over the line's position, thickness animation, or transform origin. A ::after pseudo-element positioned under the text is a plain box you can scale, fade, or resize with a CSS transition — which is what makes effects like Slide In or Dot Grow possible.

How does Slide In differ from Center Out?

Both scale the underline from 0 to full width with transform: scaleX(), but they set a different transform-origin — left for Slide In, center for Center Out, right for Right to Left. The origin is the point the line appears to grow from, so the same animation reads as three distinct effects.

What's the difference between the background-based effects and the pseudo-element ones?

Overline Swap, Highlight Sweep, and Dashed Underline animate a background-image (a linear-gradient standing in for a line or fill) via background-size or background-position instead of a separate element. That approach is handy when you want the 'line' to also serve as a text highlight, since it sits directly behind the glyphs rather than as a separate absolutely-positioned box.

Will these effects work on touch devices with no hover?

Not by default — :hover has no equivalent on a touchscreen until the user taps. Turn on Force preview in this tool to see how each effect looks in its active state; in production, consider triggering the same class via a tap/focus handler, or accept that touch users will simply see the static underline until they tap the link.

Does this tool store or upload anything?

No — every effect and color is generated and rendered locally in your browser. Nothing is sent to a server.

CSS LINK UNDERLINE EFFECTS GENERATOR

Browse a gallery of hover underline effects, hover to preview, and copy the CSS.

Force preview (skip hover)

.link {
  position: relative;
  text-decoration: none;
}

.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: #ff6a35;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.link:hover::after, .link.force::after {
  transform: scaleX(1);
}

How to use an underline effect

1
Hover (or turn on Force preview for touch devices) each card in the gallery to see the underline effect live.
2
Pick an accent color for the underline.
3
Click a card to select that effect.
4
Copy the CSS and HTML and apply the .link class to your anchor tags.

Questions

Why use a ::after pseudo-element instead of text-decoration for the underline?: text-decoration-line: underline gives you almost no control over the line's position, thickness animation, or transform origin. A ::after pseudo-element positioned under the text is a plain box you can scale, fade, or resize with a CSS transition — which is what makes effects like Slide In or Dot Grow possible.
How does Slide In differ from Center Out?: Both scale the underline from 0 to full width with transform: scaleX(), but they set a different transform-origin — left for Slide In, center for Center Out, right for Right to Left. The origin is the point the line appears to grow from, so the same animation reads as three distinct effects.
What's the difference between the background-based effects and the pseudo-element ones?: Overline Swap, Highlight Sweep, and Dashed Underline animate a background-image (a linear-gradient standing in for a line or fill) via background-size or background-position instead of a separate element. That approach is handy when you want the 'line' to also serve as a text highlight, since it sits directly behind the glyphs rather than as a separate absolutely-positioned box.
Will these effects work on touch devices with no hover?: Not by default — :hover has no equivalent on a touchscreen until the user taps. Turn on Force preview in this tool to see how each effect looks in its active state; in production, consider triggering the same class via a tap/focus handler, or accept that touch users will simply see the static underline until they tap the link.
Does this tool store or upload anything?: No — every effect and color is generated and rendered locally in your browser. Nothing is sent to a server.