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), it should display a visible, thick underline.

• The underline should be 4px solid #2684FF (blue), placed below the text.

• The default browser outline should not appear; only your custom underline should show.

Goal

Make sure the link has a visually clear and custom focus indicator to aid keyboard users.

Constraints

Do not use JavaScript or change HTML structure.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.