Why doesn't my tag's :visited css rule add a border?

Question

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.

For security reasons, modern browsers limit the styles that can be applied to `:visited` elements. Border is not one that is allowed. You aren't crazy, it just isn't possible (with CSS alone, anyway). — Cᴏʀʏ, Sep 14 '16 at 02:02
Related question: http://stackoverflow.com/q/10320351/2930477 — misterManSam, Sep 14 '16 at 02:49

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

According to MDN (about the :visited pseudo-class):

Note: For privacy reasons, browsers strictly limit the styles you can apply using an element selected by this pseudo-class: only color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill and stroke. Note also that the alpha component will be ignored: the alpha component of the not-visited rule is used instead (except when the opacity is 0, in that case the whole color is ignored, and the one of the not-visited rule is used).

Though the color can be changed, the method getComputedStyle will lie and always give back the value of the non-visited color.

For more information on the limitations and the motivation for them, see Privacy and the :visited selector.

(source)

However, you can set the color. So you can try to create a workaround like this: https://jsfiddle.net/1mbv2peg/1/

It doesn't seem to work if your set the 'transparent' color first (because the alpha component is ignored): https://jsfiddle.net/1mbv2peg/

score 2 · Answer 2 · edited Sep 14 '16 at 02:43

2

According to http://www.w3schools.com/cssref/sel_visited.asp

Browsers limits the styles that can be set for a:visited links, due to security issues.

Allowed styles are:

color

background-color

border-color (and border-color for separate sides)

outline color

column-rule-color

the color parts of fill and stroke

edited Sep 14 '16 at 02:43

misterManSam

24,303
11
69
89

answered Sep 14 '16 at 02:02

Jacob Goh

19,800
5
53
73

score -2 · Answer 3 · edited Sep 14 '16 at 12:52

-2

Maybe use jquery to add a new class?

$("a:visited").addClass("is_visited");

maybe wrap it in a document.ready call.

edited Sep 14 '16 at 12:52

beerwin

9,813
6
42
57

answered Sep 14 '16 at 02:44

thenetimp

9,487
5
29
42

If this would be possible, this would be a big leak in browsers... Imagine how it would be possible to scan a users browsing history. Please read: https://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/ – Simon Backx Sep 14 '16 at 21:15

Why doesn't my tag's :visited css rule add a border?

3 Answers3