Flask template and CSS :hover pseudo class works for button, but :after and :visited pseudo classes don't

Issue

I've got some CSS where :hover pseudo class highlights the buttons as designed, but :after and :visited do nothing. The buttons otherwise function correctly.

Everything I've found in my research is about the reverse problem, so what's wrong with my code? I tried a few things and they're listed below.

As an aside, I couldn't get var(--main-color) to be recognized when I defined it in :root.

Nothing I found said it was reserved, but it wouldn't work for me.

The HTML:

<div class="btn-group">
    <button id="Download" onclick="window.location.href = '{{ url_for('download_shelf_func') }}';"> Download A Shelf </button>
    <button id="Export" onclick="window.location.href = '{{ url_for('export_shelf_func') }}';"> Export A Shelf </button>  
    <button id="Home" onclick="window.location.href = '{{ url_for('index') }}';"> Return Home </button>
</div>

And the CSS:

:root {
    --primary-bg-color: #242c3a;
    --primary-color: #87abe5;
    --container-bg-color: #0a355b; 
    --highlight-color: #c3cbeb;
    --landing-color: #7da5e0;
}

.btn-group {
    position:relative;
}

.btn-group button {
    color: var(--primary-bg-color);
    background-color: var(--primary-bg-color);
    border: 1px solid var(--primary-bg-color);
    vertical-align: top;
    border-radius: 8px;
    width: 150px;
    height: 30px;
    cursor: pointer;
    font-size: .8em;
    padding: 0.3em;
    margin-top: 15px;
}
    
.btn-group button:after, button:visited {
    background-color: var(--landing-color);
}

.btn-group button:hover {
    background-color: var(--highlight-color);
}

Tried:

#1: (individual selectors)

button:visited {
    background-color: var(--landing-color);
}

.btn-group button:after {
    background-color: var(--landing-color);
}

.btn-group button:hover {
    background-color: var(--highlight-color);
}

#2: (double colon)

.btn-group button::after {
    background-color: var(--landing-color);
}

#3: (different order)

.btn-group button:hover {
    background-color: var(--highlight-color);
}

button:visited {
    background-color: var(--landing-color);
}

.btn-group button:after {
    background-color: var(--landing-color);
}

Solution

The :visited pseudo class works only with <a> elements that have the href attribute. Because <button> elements are not used to jump the user to a different webpage but mostly to execute a piece of JavaScript code, it doesn't work here.

As your buttons are used to link the user somewhere, change them to <a> elements:

<div class="btn-group">
    <a id="Download" href="{{ url_for('download_shelf_func') }}" target="self"> Download A Shelf </a>
    <a id="Export" href="{{ url_for('export_shelf_func') }}" target="self"> Export A Shelf </a>  
    <a id="Home" href="{{ url_for('index') }}" target="self"> Return Home </a>
</div>

Don't forget to change CSS selectors to match a elements instead of button ones!

---

The ::after pseudo class (note the double colon) is used to insert a piece of content after an element. To make it visible, you have to add content rule to it and specify width and height too.

Note that 100% used with ::after pseudo class means the entire width of the button (the parent element) and not the document

button::after {
  content: "";
  width: 100%;
  height: 50%;
}

I'm not sure what did you want to do with the ::after pseudo class, but here you go, it works.

Answered By - MfyDev