styling on element inside nested :visited declaration not being applied (vuejs, sass) - html

Question

Really confused by this one. I have a grid of items with a link to wrap the image, an image overlay div, and a title. When the link is visited, the nested image overlay should change its background color opacity. But it's not being applied. I can verify that the :visited pseudoclass is taking effect, because it will apply color change to the nested title. But the opacity won't change. I've tried numerous methods of applying it. Here's a pen:
https://codepen.io/heaversm/pen/gOYNJQv
HTML
<div class="gallery__container">
<div class="gallery__item">
<a class="gallery__link" href="http://codepen.io">
<div class="gallery__image_container">
<img src="https://i.imgur.com/MQcuk3n.jpg">
<div class="gallery__overlay"></div>
</div>
<p class="gallery__title">Title</p>
</a>
</div>
<div class="gallery__item">
<a class="gallery__link" href="http://nonsensesite.com">
<div class="gallery__image_container">
<img src="https://i.imgur.com/MQcuk3n.jpg">
<div class="gallery__overlay"></div>
</div>
<p class="gallery__title">Title</p>
</a>
</div>
</div>
CSS
.gallery__container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1.375vw;
margin: 0 auto;
padding: 40px 50px;
}
.gallery__image_container {
position: relative;
}
.gallery__item {
width: 100%;
height: auto;
}
.gallery__link {
display: block;
width: 100%;
height: 100%;
&:visited {
color: red; //just to verify visited pseudoclass is applied
.gallery__overlay {
background-color: rgba(0,0,0,.1) !important; //NOT WORKING
}
}
}
.gallery__image {
//width: 100%;
//height: auto;
}
.gallery__overlay {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(black, 0.9);
z-index: 1;
}

Answer 1

From https://developer.mozilla.org/en-US/docs/Web/CSS/:visited
For privacy reasons, browsers strictly limit which styles you can apply using this pseudo-class, and how they can be used:
Allowable CSS properties are
color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, and outline-color.
Allowable SVG attributes are fill and stroke.
The alpha component of the allowed styles will be ignored. The alpha component of the element's non-:visited state will be used instead, except when that component is 0, in which case the style set in :visited will be ignored entirely.
Although these styles can be change the appearance of colors to the end user, the window.getComputedStyle method will lie and always return the value of the non-:visited color.
And from my own observation, child elements of a link are also subject to the same styling restrictions.