I want to know whether it is possible to get a DOM element's ::before
content, which was set by CSS3.
I have tried some ways, but I still can't make it, so it's very confusing to me!
// https://rollbar.com/docs/ const links = document.querySelectorAll(`ul.image-list a`); links[0]; // <a href="/docs/notifier/rollbar-gem/" class="ruby">::before Ruby</a> links[0]; // links[0].textContent; //"Ruby" links[0].innerText; // "Ruby" links[0].innerHTML; // "Ruby" // ??? links[0]::before;
This is the case:
The ::before selector inserts something before the content of each selected element(s). Use the content property to specify the content to insert. Use the ::after selector to insert something after the content.
The easiest way to access a single element in the DOM is by its unique ID. You can get an element by ID with the getElementById() method of the document object. In the Console, get the element and assign it to the demoId variable. Logging demoId to the console will return our entire HTML element.
before() The Element. before() method inserts a set of Node or string objects in the children list of this Element 's parent, just before this Element . String objects are inserted as equivalent Text nodes.
You can't select pseudo elements in jQuery because they are not part of DOM. But you can add a specific class to the parent element and control its pseudo elements in CSS.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With