I'm trying to have a small vertical line next to a link when it's been visited.
.navigation a:visited {
border-left: 3px solid black;
color: purple;
}
<div class="navigation">
<div class="content">
<div id="w">W</div>
<ul>
<li><a href="index.html">hello</a></li>
<li><a href="one.html">Two</a></li>
<li><a href="two.html">Three</a></li>
<li><a href="three.html">Four</a></li>
</ul>
</div>
</div>
For the life of me, I can't get the border to change on visited. It works on :hover
. I've tried !important
, I've tried defining the a
default to have a border: 0px solid black
that is then, in my mind, 'modified' to be 3px
. None of it is working. Is this just not a possible thing to do?
To clarify, other things, such as color
, are applying on :hover
. So the purple bit works.