I’ve got some CSS where my :hover
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: (individuated elements)
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);
}
2
Answers
The :visited CSS pseudo-class applies once the link has been visited by the user. For privacy reasons, the styles that can be modified using this selector are very limited. The :visited pseudo-class applies only to and elements that have an href attribute.
The
:visited
pseudo class works only with<a>
elements that have thehref
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:Don’t forget to change CSS selectors to match
a
elements instead ofbutton
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 addcontent
rule to it and specifywidth
andheight
too.Note that
100%
used with::after
pseudo class means the entire width of the button (the parent element) and not the documentI’m not sure what did you want to do with the
::after
pseudo class, but here you go, it works.