0

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.

misterManSam
  • 24,303
  • 11
  • 69
  • 89
Caleb Jay
  • 2,159
  • 3
  • 32
  • 66
  • 1
    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

3 Answers3

3

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/

Community
  • 1
  • 1
Simon Backx
  • 1,282
  • 14
  • 16
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
misterManSam
  • 24,303
  • 11
  • 69
  • 89
Jacob Goh
  • 19,800
  • 5
  • 53
  • 73
-2

Maybe use jquery to add a new class?

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

maybe wrap it in a document.ready call.

beerwin
  • 9,813
  • 6
  • 42
  • 57
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