Skip to main content
CSS-Tricks
Since 2007
  • Articles
  • Guides
  • Almanac
  • Links
  • Picks
  • Newsletter
  • Search

Articles Tagged
underlines

6 Articles
{
,

}
Direct link to the article A CSS-only, animated, wrapping underline
links underlines

A CSS-only, animated, wrapping underline

Nicky Meuleman, inspired by Cassie Evans, details how they built the anchor link hover on their sites. When a link is hovered, another color underline kinda slides in with a gap between the two. Typical text-decoration doesn’t help here, …

Chris Coyier on Aug 21, 2020
Direct link to the article The Contrast Triangle
accessibility high-contrast links text underlines

The Contrast Triangle

Chip Cullen:

Let’s say you’re building a site, and you’re working with a designer. They come to you with some solid designs, and you’re ready to go. You’re also a conscientious front end developer and you like to make

…
Chris Coyier on Apr 20, 2020
Direct link to the article Link Underlines That Animate Into Block Backgrounds
links text-decoration underlines

Link Underlines That Animate Into Block Backgrounds

It’s a cool little effect. The default link style has an underline (which is a good idea) and then on :hover you see the underline essentially thicken up turning into almost what it would have looked liked if you …

Chris Coyier on Sep 23, 2019
Direct link to the article Styling Links with Real Underlines
links underlines

Styling Links with Real Underlines

Before we come to how to style underlines, we should answer the question: should we underline?

In graphic design, underlines are generally seen as unsophisticated. There are nicer ways to draw emphasis, to establish hierarchy, and to demarcate titles.…

Ollie Williams on Aug 30, 2019
Direct link to the article Styling Underlines on the Web
text-decoration underlines

Styling Underlines on the Web

Styling the underlines that sit beneath links can be a tricky business, and I constantly forget what’s the best approach depending on the situation. Thankfully however, John Jameson gets us up to speed in this guest post.…

John D. Jameson on Oct 10, 2016 Updated on Jul 6, 2018
Direct link to the article Alternative Style Links
links underlines

Alternative Style Links

You may know the classic link style very well. Blue with an underline. There is an alternative way to achieve the same effect, that is a bit nicer.

Here is the code:

a {
  text-decoration: none;
  background: url(link-line.gif) repeat-x 0 
…
Volkan Görgülü on Oct 25, 2007 Updated on Mar 20, 2017

CSS-Tricks is powered by DigitalOcean.

Get Curated Front-End Roundups Right in Your Inbox

Coming back really, really soon! See past issues →

DigitalOcean
  • About DO
  • Cloudways
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Contact
  • Write for CSS-Tricks!
  • Advertise with us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • Bluesky
Back to Top