I'm struggling to add a small vertical line next to a link once it has 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>I've been unsuccessful in changing the border on visited links. It seems to work fine on :hover, but not when visited. I've attempted using !important and defining default styles for a with no luck. Is this simply not achievable?
To clarify, other style changes like color are applied successfully on :hover, so the issue seems specific to the border color change.