Skip to main content
CSS is fun and cool and I like it.
Article

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.

That’s clear in this advice from Butterick’s "Practical Typography":

If you feel the urge to underline, use bold or italic instead. In special situations, like headings, you can also consider using all caps, small caps, or changing the point

Read article
Article

Nested Links

The other day I posted an image, quite literally as a thought exercise, about how you might accomplish "nested" links. That is, a big container that is linked to one URL that contains a smaller container or text link inside of it that goes to another URL. That's harder than it might seem at first glance. The main reason being that...

<!-- this is invalid and won't render as expected -->
<a href="#one">
  Outside
  </a><a href="#two">
    Inside
  </a>

Eric Meyer … Read article

Article

Having fun with link hover effects

A designer I work with was presenting comps at a recent team meeting. She had done a wonderful job piecing together the concept for a design system, from components to patterns and everything in between that would make any front-end developer happy.

But there was a teeny tiny detail in her work that caught my eye: the hover state for links was a squiggle.… Read article

Article

Hyperlinking Beyond the Web

Hyperlinks are the oldest and the most popular feature of the web. The word hypertext (which is the ht in http/s) means text having hyperlinks. The ability to link to other people’s hypertext made the web, a web — a set of connected pages. This fundamental feature has made the web a very powerful platform and it is obvious that the world of apps needs this feature. All modern platforms support a way for apps to register a URIRead article

Article

CSS Basics: Styling Links Like a Boss

You are probably well acquainted with how links looks without any styling at all. That blue. That underline. That's a link in it's purest form. But what if we want to change things up a bit? Perhaps blue doesn't work with your website's design. Maybe you have an aversion to underlines. Whatever the reason, CSS lets us style links just like any other element.

Article

How to Disable Links

The topic of disabling links popped up at my work the other day. Somehow, a "disabled" anchor style was added to our typography styles last year when I wasn't looking. There is a problem though: there is no real way to disable an <a></a> link (with a valid href attribute) in HTML. Not to mention, why would you even want to? Links are the basis of the web.

At a certain point, it looked like my co-workers were not going … Read article

Almanac

:any-link

The :any-link pseudo-class in CSS provides a method for selecting elements that are the source anchor of a hyperlink.

If the term source anchor lost you, that's a fancy name for the href attribute on the HTML elements <a></a>, <link /> and <area />. (Why you would need to target an <area /> or <link /> in CSS is beyond me, but hey.) The HTML spec has a whole lot more information on that.

An element that accepts … Read article

Almanac

:link

The :link selector is a pseudo-class that targets all unvisited anchor (<a>) elements on a page.

a:link {
  color: aquamarine;
}

The example above will change the color of all unvisited links to aquamarine.

When used in combination with the :hover pseudo-class, :link must appear first, or else not be defined at all, in order for the :hover styles to work. This is because they are equally specific, so if :link came after, those styles would override … Read article

Article

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 100%;
  padding-bottom: 1px;
}

Giving the background position of x at 0 and y at 100% places the background image at the bottom of the text and by setting the padding-bottom to 1px, we make the distance between the text … Read article

icon-link icon-logo-star icon-search icon-star