Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Accessible Link Focus Underline

Solution: Accessible Link Focus Underline

Let’s add a clear custom underline to a focused link to improve accessibility.

We'll cover the following...

Problem description

Given an HTML page with an <a class="accessible-link" href="#">Learn more</a>, write CSS to meet the following requirements:

  • When the link is :focus (for example, using the Tab key), ...