Visited link doesn't change background color

Question

I've been dealing with a problem for some time now, but I can't seem to solve it. I have social icons in the footer of my website, and I want to change their color when they are visited or when you hover over them. However, for some reason, the visited state doesn't change the background color if I leave it transparent for a link. If I add a background color in the CSS for links, then it changes the color when visited. I'm wondering why this is happening and how I can solve it, especially since I have a gradient background for the entire div and I can't apply it to the background color of this particular link.

`# Here is the React code

import React from 'react'

import {GrFacebookOption, GrInstagram} from "react-icons/gr"
import "./Footer.css"

const Footer = () => {
  return (
    <div className='app__footer'>
      <hr />
      <div className='app__footer-social'>
      <a className='fb' href='https://www.facebook.com/'><GrFacebookOption size={13}/></a>
      <a className='ig' href='asdasdasds' ><GrInstagram size={13}/></a>
      </div>
    </div>
  )
}

export default Footer

Here is the CSS code

`.app__footer-social a{
    border: 2px solid #E3E3E4;
    border-radius: 50%;
    margin: 0 0.55rem;
    padding: 0.5rem 0.6rem 0.4rem;
    color: rgba(19, 24, 33, 0.3);
}

.app__footer-social.fb:visited {
    color: #FFFFFF;
    border: 2px solid #2F4A80;
    background-color: #2F4A80;
    box-shadow: 0px 20px 40px rgba(19, 24, 33, 0.3);
}

.app__footer-social .fb:hover {
    color: #FFFFFF;
    background: #4267B2;
    border: 2px solid #4267B2;
    box-shadow: 0px 20px 40px rgba(19, 24, 33, 0.3);
}

.app__footer-social .ig:visited {
    color: #FFFFFF;
    background: #8F2762;
    border: 2px solid #8F2762;
    box-shadow: 0px 20px 40px rgba(19, 24, 33, 0.3);
}

.app__footer-social .ig:hover {
    color: #FFFFFF;
    background: #C13584;
    border: 2px solid #C13584;
    box-shadow: 0px 20px 40px rgba(19, 24, 33, 0.3);
}
`

.app__footer-social a{
    border: 2px solid #E3E3E4;
    border-radius: 50%;
    margin: 0 0.55rem;
    padding: 0.5rem 0.6rem 0.4rem;
    color: rgba(19, 24, 33, 0.3);
    background: red
}

Answer 1

In your css, try adding a default background color to the a tag first.

.app__footer-social a {
    background-color: #fff;
}

:visited pseudo has privacy/property limitations but can override previously defined styles. I believe this is done to prevent malicious sites determining where you have visited. Using the :link pseudo should also work to create a style :visited can override.

.app__footer-social .fb:link {
    background-color: #fff;
}

This approach will not work with anything that is transparent (including using alpha 0.0 in rgba/hsla) or has no color.

Also keep in mind that pseudo classes should be used in a defined order => link, visited, focus, hover, active.

More detail can be found here.