Geek Culture
Published in

Geek Culture

style-your-link

CSS Link Style 🎨

Using CSS, links can be styled in many different ways.

We can change the style of CSS link as:

  1. :hover
  2. :active
  3. :visited
  4. :focus
  5. :focus-within
  6. :focus-visible

1. :hover

The :hover CSS pseudo-class triggered when the user hovers over an element with the cursor.

a:hover {
color: red
}

If you are using :link, :visited, :active. Remember to add hover after link and visited according to LVHA-order: :link — :visited — :hover — :active.

2. :active

The :active CSS pseudo-class starts when the user presses down the primary mouse button.

a:active {
color: blue;
}

The :active pseudo-class is commonly used on <a> and <button> elements.

3. :visited

The :visited CSS pseudo-class represents links that the user has already visited.

a:visited {
color: yellow;
}

4. :focus

The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard’s Tab key.

input:focus {
background-color: green;
}

NOTE 📝 Never remove the focus outline

Checkout the codepen where you play and understand how hover, active, visited and focus are working.

5. :focus-within

The :focus-within CSS pseudo-class represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus.

div:focus-within {
background: cyan;
}

6. :focus-visible

The :focus-visible pseudo-class applies to provide a different focus indicator based on the user’s input modality (mouse vs. keyboard).

.focus-visible:focus-visible {
background: pink;
color: red;
}

Why do we need :focus-visible?

:focus also do that same right? 🤔
But there is one problem. So imagine you wanted to remove outline of some button or links. Then it would be little bit problematic for those user who tries to access through keyboard.

Here we can use :focus-visible, which applies when you actually want a visual indicator to help the user for focus to see.

Checkout the codepen here 👇

Reference 🧐

🌟 Twitter | 👩🏻‍💻 suprabha.me | 🌟 Instagram

--

--

--

A new tech publication by Start it up (https://medium.com/swlh).

Recommended from Medium

Implement C++ function template, Function Overloading & do-while loop in Python

Implement and register dependency injection in ASP .NET CORE/.NET 6

Bringing the cloud to 5G edge with AWS Wavelength

Refactoring code: single class operating on too many abstraction layers

Reconciliation Automation — Lifeguard of your internal control under the remote working condition

Local Kubernetes for Linux — MiniKube vs MicroK8s

Infrastructure As Code

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Suprabha Supi

Suprabha Supi

Frontend Developer sharing JS, HTML, CSS, GoLang🔥 Find all on blog.suprabha.me💛

More from Medium

Difference Between HTML and CSS

CBEM with Selectors — Enhanced BEM CSS Methodology

Ultimate Guide to CSS Positioning

Understanding CSS Selectors