How to Get a Dom Element's ::Before Content with JavaScript

How to get a DOM element's ::before content with JavaScript?

Pass ":before" as the second parameter to window.getComputedStyle():

console.log(getComputedStyle(document.querySelector('p'), ':before').getPropertyValue('content'));

p::before,p::after {  content: ' Test ';}

<p>Lorem Ipsum</p>

where is the content of ::before added in DOM

CSS pseudo-elements such as ::before, ::after and ::first-line are not present in the DOM because they are not real DOM elements (hence, "pseudo"). Pseudo-elements are virtual elements created by CSS and rendered by browsers. They are not part of the HTML. Also, because they are not part of the DOM they cannot be directly targeted and controlled with JavaScript. You should, however, be able to access pseudo-elements directly through the browser.

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

In CSS:

span:after {
    content: attr(data-content) ' any other text you may want';
}

If you want to prevent the 'other text' from showing up, you could combine this with seucolega's solution like this:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});

In CSS:

span.change:after {
    content: attr(data-content) ' any other text you may want';
}

Use of Pseudo-Element ::before in JavaScript

No, you cannot access :before or :after from javascript, because they are not a part of the DOM. However you can still achieve your goal by using CSS classes. Example:

<script>
    document.getElementById('abc').className += "minus";
</script>

<style>
    #all-address:before {
        display: none;
    }
    #all-address.minus:before {
        display: block;
    }
</style>

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.

---

Related Topics