Cannot Change the Content of Visited :Before Pseudo-Elements

Cannot change the content of visited :before pseudo-elements

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 ;)

Why ::before pseudo-element not working with :visited pseudo-class?

Mozilla Developer Network :visited says

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.

Idea 1: create child element and write CSS for it

<a href="#1" class="style-3">Seen Effects<span>Seen</span></a>
<a href="#2" class="style-3">Seen Effects<span>Seen</span></a>
<a href="#3" class="style-3">Seen Effects<span>Seen</span></a>

*, *:before, *:after {
    box-sizing: border-box;
}
body {
    background-color: #eee;
    font-size: 23px;
    padding: 50px;
    font-family: 'Ubuntu Condensed', sans-serif;
}
.style-3 {
    margin: 20px;
    float: left;
    padding: 20px 20px 20px 20px;
    border: 1px solid #ccc;
    background-color: #fff;
    position: relative;
    text-decoration: none;
}
.style-3 {
    color: green;
}
.style-3:visited {
    color: red;
}
.style-3 span{
    color: #fff;
    margin-left: 20px;
}
.style-3:visited span{
    color: #ccc;
    margin-left: 20px;
}

Fiddle https://jsfiddle.net/ZigmaEmpire/do8yeLm1/

Idea 2: create a transparent background image with text matching the background color, and change the background color for :visited (not recommended)

CSS rules for :visited won't work (beside color)?

These are the properties that can be changed with :visited:

1. color
2. List item
3. background-color
4. border-color (and its sub-properties)
5. outline-color

The color parts of the fill and stroke properties
You can only use :visited to change those properties.

This are due to privacity concerns, as css tricks states on this information: https://css-tricks.com/almanac/selectors/v/visited/

Why is it impossible to change content in css?

The CSS 2.1 spec cited says: “Applies to: :before and :after pseudo-elements”. This restriction has been relaxed in the draft for CSS3 Generated and Replaced Content Module, which is old (2003) and outdated but still partly implemented. Opera seems to support content for normal elements, except for the use of URL values (used to insert images), whereas Chrome and Safari do the same only for URL values. So you code actually works on Safari.

More widespread support is not very likely unless specification work on the module makes some progress. On the W3C CSS module status page, the module is in the “Rewriting” section, with the note “Severely outdated”.

Unable to view pseudo element content in ::before on IE11

It doesn't work in IE because IE doesn't allow anything other than <option> tag inside a <select> box. For more information, you can refer to this answer.

If you want to personalize the select box, you can use <select> with <label>. You can refer to the multiple select sample code below which works well in IE and other browsers:

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
  display: none;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: block;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

<form>
  <div class="multiselect">
    <div class="selectBox">
      <select>
        <option>Select an option</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div id="checkboxes">
      <label for="one">
                    <input type="checkbox" id="one" />1
                </label>
      <label for="two">
                    <input type="checkbox" id="two" />2
                </label>
      <label for="three">
                    <input type="checkbox" id="three" />3
                </label>
    </div>
  </div>
</form>

How change content value of pseudo :before element by Javascript

Update (2018): as has been noted in the comments, you now can do this.

You can't modify pseudo elements through JavaScript since they are not part of the DOM. Your best bet is to define another class in your CSS with the styles you require and then add that to the element. Since that doesn't seem to be possible from your question, perhaps you need to look at using a real DOM element instead of a pseudo one.

overflow: hidden doesn't work on :after and :before pseudo elements

I believe this is because of position: absolute, which takes the arrow out of the normal flow. In order to kinda preserve it in the flow, I've added position: relative to the arrow parent, and had to adjust top position as well, seems to work as expected:

@keyframes tipUp {
  0% {
    transform: translateY(-10px) rotateZ(225deg);
  }
  100% {
    transform: translateY(100px) rotateZ(225deg);
  }
}

@keyframes lineUp {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(100px);
  }
}

.scrolldown {
  position: relative;
  margin: 0 auto;
 }
  
.scrolldown p {
    font-size: 1rem;
    font-weight: 600;
    padding-bottom: 0.8rem;
    text-align: center;
  }
 
 .scrolldown__arrow {
    width: 6rem;
    height: 6rem;
    border: 6px solid black;
    border-radius: 50%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }
  
 .scrolldown__arrow:before {
    position: absolute;
    display: inline-block;
    content: "";
    background: black;
    width: 10px;
    height: 45px;
    top: 25%;
    left: 50%;
    margin-top: -50px;
    margin-left: -5px;
    transform: translateY(50px);
  }
 
 .scrolldown__arrow:after {
    position: absolute;
    display: inline-block;
    content: "";
    width: 22px;
    height: 22px;
    color: black;
    border-top: 9px solid;
    border-left: 9px solid;
    transform: rotateZ(45deg);
    top: 25%;
    left: 50%;
    margin-top: -30px;
    margin-left: -15.5px;
    transform: translateY(50px) rotateZ(225deg);
  }
 
.scrolldown__arrow:hover:before {
      animation: lineUp 1s cubic-bezier(0, 0.6, 1, 0.4) infinite 0.5s;
    }

.scrolldown__arrow:hover:after {
      animation: tipUp 1s cubic-bezier(0, 0.6, 1, 0.4) infinite 0.5s;
    }
  }
}

<body>

  <div class="scrolldown">
    <p>SCROLL DOWN</p>
    <div class="scrolldown__arrow"></div> 
  </div>

</body>

---

Related Topics