Workshop › My business card › Step 11 of 12

Links that react

What we are doing

Last touch: links in the card's color without underline, and an underline when the mouse is over them.

```css
a {
  color: #4f46e5;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
```

What it means

• text-decoration: none removes the default underline of links.
• a:hover applies only while the mouse is over a link: the underline comes back.

Your turn

Write the two rules under the ul rule. Then move the mouse over your links.

Skills: Styling with CSS

← Links in a row Build it yourself: a card that reacts →

All steps

1. Your name as a heading
2. A line about you
3. Put them in a box
4. Your first CSS
5. Make the box look like a card
6. Center the card
7. A soft shadow
8. Color your name
9. Add your links
10. Links in a row
11. Links that react
12. Build it yourself: a card that reacts