how to find and get an ::after or ::before of an element in javascript?

Question

here is my code :

.back-div::after {
    background: black;
    content: "";
    opacity: 100%;
    position: absolute;
    display: none;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 70%;
    height: 100%;
    z-index: 100;
}

how to get or find backdiv::after ?? please give the simplest way because I don't know even one library

Alberto Sinigaglia · Answer 1 · 2021-06-17T22:31:07.133

0

you can do something like this:

let color = window.getComputedStyle(
    document.querySelector('.back-div'), ':after'
).getPropertyValue('color')

edited Jun 17 '21 at 22:31

answered Jun 17 '21 at 22:29

Alberto Sinigaglia

12,097
2
20
48

love U man – Behrad Moosavi Jun 17 '21 at 22:30
@BehradMoosavi you're welcome, feel free to mark the question as correct if it solves your problem – Alberto Sinigaglia Jun 18 '21 at 11:57

score 0 · Answer 2 · answered Jun 17 '21 at 22:41

Here's how to get the properties of the pseudo selector and a quick demo on how to switch classes (the best way to 'affect' css rules with pseudo selectors)

let theStyle = window.getComputedStyle(document.querySelector('.exciting-text'), ':after')
console.log(theStyle.content)
console.log(theStyle.color)

setTimeout(function() {
document.querySelector('.exciting-text').classList.add('boring-text')
document.querySelector('.exciting-text').classList.remove('exciting-text')
}, 1500)

.exciting-text::after {
  content: " <- EXCITING!";
  color: green;
}

.boring-text::after {
  content: " <- BORING";
  color: red;
}

<p class="boring-text">Here is some plain old boring text.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

how to find and get an ::after or ::before of an element in javascript?

2 Answers2