CSS project 2c: remove the link underline, then add it back on hover

The menu is in a row and centered, but every link still carries the browser's underline. In a menu bar that looks cluttered, and taking it off is one line of CSS. The work in this lesson is what you put back in its place, because the underline was doing a job: it told people "this is a link". Without it, the links need other signals for hover, for the page you are on, and for keyboard users moving through the page with the Tab key.

Before

These are the rules from lessons 16 and 17 that touch the links:

.site-header a {
  color: inherit;
}

.menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 4px;
}

And here is how the links behave with only those rules:

• Every link, the logo included, is white and underlined.
• Hovering changes the pointer to a hand and nothing else.
• Nothing marks the Home link as the page you are on.
• Pressing Tab shows the browser's default focus ring, which differs from browser to browser and can be hard to pick out on dark blue.

After

Add these rules below the existing ones in style.css:

.logo,
.menu a {
  text-decoration: none;
}

.menu a:hover {
  background-color: rgb(255 255 255 / 0.15);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.menu a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: #f2c14e;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.logo:focus-visible,
.menu a:focus-visible {
  outline: 2px solid #f2c14e;
  outline-offset: 2px;
}

And the same four points again:

• The logo and the menu links have no underline at rest. The grouped selector from the selectors lesson handles both in one rule.
• Hovering a menu link lights up its box with a faint white tint and brings back a thin underline. The tint is white at 15 percent opacity, written in the modern rgb() syntax with a slash before the alpha value, so it lightens whatever color sits beneath it. The border-radius from lesson 17 now shows as soft corners on that box.
• The Home link keeps a thick yellow underline, sitting a little below the letters, because it has aria-current="page" in the HTML. When you build the other pages, move that attribute to the matching link on each one and the marker follows.
• Tabbing to any header link draws a 2 pixel yellow outline around it, 2 pixels out from the edge.

Why each piece is there

The hover style uses two signals at once, a background change and an underline. Hover is a nice touch for mouse users, but it is not enough on its own: phones and tablets have no hover at all, which is why the current page marker and the focus ring cannot depend on it.

:focus-visible matches when an element has keyboard focus and the browser decides the focus should be shown, which in practice means when someone arrives by pressing Tab rather than by clicking with a mouse. WCAG, the main web accessibility guideline, asks for a visible focus indicator (success criterion 2.4.7), and people who use a keyboard instead of a mouse rely on it to know where they are. The yellow outline has good contrast against the dark band, and outline-offset keeps it from crowding the text.

Order matters in one spot. .menu a:hover and .menu a[aria-current="page"] have the same weight, 0, 2, 1, since a pseudo-class and an attribute selector each count as a class. When you hover the Home link, both match, and the current page rule wins because it comes later. So the yellow marker stays put and only the background tint changes. Swap the two rules and the hover underline replaces the marker while the pointer is over it.

The two mistakes to avoid

The first is outline: none on links or buttons with nothing in its place. Old reset stylesheets did this to hide focus rings people found ugly, and it leaves keyboard users with no idea where the focus is. If you change the focus style, replace it, as above; never just delete it.

The second is removing underlines from links inside paragraphs. A menu is recognizable as a set of links by where it sits and how it looks. A link in the middle of a sentence is not, and if color is the only thing that sets it apart, readers who cannot tell the colors apart may miss it. WCAG covers that case under "Use of Color". Keep the underline in body text, and if you want it lighter, adjust it with text-decoration-thickness and text-underline-offset from the text decoration lesson instead of removing it.

Try it

Load the project in the online HTML editor with all the CSS so far in a <style> element, add the new rules, then click into the preview and press Tab a few times to watch the focus ring move from the logo across the menu. Try moving aria-current="page" to the Guides link.