The CSS text-decoration property

The two links in the project are still underlined. Every browser draws that underline on <a> elements that have an href, and on a link in running text it is useful: it is the signal that says "you can click this". On a button it is clutter, because the shape, the border and the fill already say the same thing. This lesson is short on purpose: one declaration, and what the browser does with it.

The code

.btn {
  /* ...lessons 2 to 6 as before... */
  /* Lesson 7: text-decoration */
  text-decoration: none;
}

Reload. The underline is gone from both links. The <button> never had one, so nothing changes there, and the declaration does no harm on it. Writing it on .btn rather than on every a means only links that join the button class lose the underline. Links in your normal paragraphs keep theirs.

What text-decoration is made of

text-decoration is a shorthand for four properties:

The value none belongs to text-decoration-line. When you set the shorthand to none, the browser also resets the other three longhands to their initial values. Two related properties are not part of the shorthand and keep whatever value they had: text-underline-offset, which moves an underline away from the letters, and text-underline-position.

When you keep the underline

Most links on a site should stay underlined, and the longhands let you make that underline look deliberate instead of removing it. A sketch for links inside articles, which is not part of Project 1:

/* Not part of Project 1: underlines for links in body text */
.article a {
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

.article a:hover {
  text-decoration-thickness: 0.15em;
}

The offset moves the line clear of letters like g and y, and the thicker line on hover gives feedback without hiding the cue. Project 2 comes back to underlines when it builds a menu (removing the underline on links). The reasoning there is the same as here: inside a clearly marked navigation bar, the underline can go.

Questions

I set text-decoration: none on a span inside an underlined link and the line stays. Why?

A decoration is drawn across the text of all descendants of the element that set it, and a child cannot remove it. Take the decoration off the element that set it, the <a> itself, which is exactly what .btn does here.

Is removing underlines bad for accessibility?

Inside running text, usually yes. A link that differs from the words around it only by color is easy to miss, especially for readers who see color differently, and WCAG asks that color not be the only visual means of conveying information. A link styled as a button, with a visible border and fill, carries the signal in its shape, so the underline is redundant there.

Does text-decoration change the clickable area?

No. It only draws lines. The clickable area comes from the element's box, which is why padding mattered in lesson 3.

Try it: in the online HTML editor, replace none with underline wavy #b45309 on .btn to see the shorthand set line, style and color at once, then put none back.