JavaScript: accedere al contenuto degli pseudo-elementi CSS :before ed :after

Il DOM ci permette di accedere anche al contenuto generato tramite i CSS. Si tratta semplicemente di leggere il valore testuale della proprietà content tramite JavaScript.

Dato il seguente codice CSS:

#test:before {
    content: 'Before ';
}

Possiamo usare il metodo getComputedStyle() in questo modo:

'use strict';

let test = document.querySelector('#test');
let beforeContent = getComputedStyle(test, ':before').content;

console.log(beforeContent); // 'Before '