Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot change the content of visited :before pseudo-elements

I was trying to add some effects for visited links, then I got this problem.

Here is the code: http://dabblet.com/gist/5447894

Only Opera can successfully change the content of :before pseudo-elements. All other browsers are fail. Did I miss anything? Thanks

like image 720
Peiwen Avatar asked Apr 23 '13 22:04

Peiwen


People also ask

How do you use before and after pseudo elements?

CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input> ). This effectively allows you to show something on a web page that might not be present in the HTML content.

What does the pseudo-element :: Before do?

::before (:before) In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

What is the pseudo-class that sets the style for links that have already been visited?

The :visited CSS pseudo-class represents links that the user has already visited.

Can select have pseudo elements?

CSS - The ::selection Pseudo-elementThe ::selection pseudo-element matches the portion of an element that is selected by a user. The following CSS properties can be applied to ::selection : color , background , cursor , and outline .


2 Answers

The allowed (= not ignored) CSS properties of visited links are color, background-color, border-*-color, outline-color and, column-rule-color (more under certain circumstances).

This is to prevent history stealing attacks. See this article for further details.

So you can, technically, set a :before pseudo class for :visited links, but it will be ignored and appears as if the links are not visited. This is not a bug, it's a feature ;)

like image 102
tessi Avatar answered Oct 27 '22 05:10

tessi


There is a very limited range of possibilities for styling :visited links in modern browsers for privacy reasons – so that you couldn't detect which sites the user has visited before by checking the computed style with javascript.

The allowed properties for styling for :visited links is

  • color
  • background-color
  • border-color (and its sub-properties)
  • outline-color
  • The color parts of the fill and stroke properties

Even so, you cannot get the values of the computed style for visited links via javascript.

You can read more about it here.

like image 42
pilsetnieks Avatar answered Oct 27 '22 06:10

pilsetnieks