CSS Link Generator
Design how the links on your site look and behave, then copy the CSS and HTML. Pick a link colour, hover and pressed colours, and an underline style, or choose one of the animated hover effects: underlines that grow, slide or change colour, highlighter and background sweeps, a text fill and an arrow that slides in.
The animated underlines are drawn with backgrounds rather than ::after, so they also work on links that wrap onto a second line. You can set the target and rel attributes too, and the generator checks contrast, keeps a visible focus outline for keyboard users and respects reduced-motion settings.
Preview
About this tool
Underlines that work across lines
Most animated underline tutorials draw the line with a ::after pseudo-element. That only works on one line: when a link wraps, the line appears under the last part only, or across the full width of the paragraph. This generator draws the line with background-image and animates background-size, so the underline follows every line of the link:
.link {
background: linear-gradient(currentColor, currentColor) 0 100% / 0% 2px no-repeat;
transition: background-size 0.3s ease;
}
.link:hover,
.link:focus-visible {
background-size: 100% 2px;
}Link states
A link can be styled in five states: :link (not visited), :visited, :hover, :focus-visible (reached with the keyboard) and :active (being pressed). The hover style is also applied on focus, so keyboard users see the same effect. Rules are written in the order that keeps each state working.
For privacy, browsers only allow colour changes on :visited.
target and rel
target="_blank"opens the link in a new tab. Use it sparingly, and tell people: the generator can add a small icon that screen readers announce as “opens in a new tab”.noopenerstops the new page from controlling yours, andnoreferreralso hides which page the visitor came from.nofollow,sponsoredandugctell search engines about links you don’t vouch for, paid links and user-generated links.
Accessible links
- Link colours need a contrast of at least 4.5:1 with the background. The badge above the preview checks this.
- Links in a paragraph must be recognisable without colour alone. Keep an underline, or make the link colour differ from the text by at least 3:1.
- Keep a visible focus outline, and turn animations off for people who prefer reduced motion. Both are on by default.
Frequently Asked Questions
How do I style a link in CSS?
Select the link, usually with a class such as .link or with a for every link, and set color and text-decoration. Then add rules for the states: :hover and :focus-visible for when the pointer is over the link or it has keyboard focus, :active while it’s pressed and :visited for links already visited. The generator writes these for you.
How do I create an animated underline?
Draw the underline as a background: background: linear-gradient(currentColor, currentColor) 0 100% / 0% 2px no-repeat, then set background-size: 100% 2px on hover and add a transition on background-size. Changing the starting position to 50% or 100% makes the line grow from the centre or the right. Unlike the ::after method, this works when the link wraps onto several lines.
How do I remove the underline from a link?
Set text-decoration: none. Be careful with links inside paragraphs, though: without an underline, people who can’t easily see colour differences may not notice the link. Keep an underline in body text, or make sure the link colour has at least a 3:1 contrast with the surrounding text. The generator warns you when it doesn’t.
How do I change the underline colour, thickness or distance?
Use text-decoration-color, text-decoration-thickness and text-underline-offset. For example, text-decoration: underline 2px #93c5fd; text-underline-offset: 4px; draws a light blue 2px line 4px below the text. All modern browsers support these properties, and text-decoration-style adds dotted, dashed, double and wavy lines.
What do target="_blank" and rel="noopener" do?
target="_blank" opens the link in a new tab or window. rel="noopener" stops the new page from getting access to your page through JavaScript, which prevents a kind of phishing attack. Current browsers apply noopener to _blank links automatically, but adding it does no harm and protects older browsers.
When should I use nofollow, sponsored or ugc?
They are hints for search engines. Use sponsored for adverts, paid placements and affiliate links, ugc for links in comments, forum posts and other user-generated content, and nofollow for any other link you don’t want to vouch for. You can combine them, for example rel="nofollow sponsored".
Why can I only change the colour of visited links?
To protect privacy. If any property could change on :visited, a page could measure the link and find out which sites you’ve been to. Browsers therefore only allow colour properties such as color and text-decoration-color on visited links.
Should links have a focus style?
Yes. People who use a keyboard move between links with Tab and need to see where they are. The generator adds a clear :focus-visible outline, which appears for keyboard focus but not when a link is clicked with a mouse, and applies the hover effect on focus too.
Do the hover animations respect reduced motion?
Yes. With Respect reduced motion on, the CSS includes a @media (prefers-reduced-motion: reduce) block that switches the transition off. The link still changes on hover, but instantly, for people who have asked their device for less motion.