Pseudo-elementy (before, after) i JavaScript

Pseudo-elementy w CSS są bardzo użytecznym narzędziem, który pozwala uzupełnić listę dzieci o pierwszy i ostatni element selektora. Dla wspomnianych elementów możemy definiować dowolne reguły CSS (więc mogą być typu inline lub block itp.), co pozwala nam osiągnąć niezwykle ciekawe efekty. Poniżej zamieszczam prosty przykład użycia pseudo-elementów before i after.

<style>
div::before {
  content: 'Nowy wiersz';
  display: inline;
  border: 1px solid red;
}

div::after {
  content: '--';
  display: block;
  border: 1px solid green;
}
</style>

<div>
  <span>Jakaś treść</span>
</div>

Powyższy kod doda do środka div-a, dwa dodatkowe elementy. Pierwszy z obramowaniem w kolorze czerwonym w tej samej linii co span (bo oba są „inline”), drugi na końcu z obramowaniem zielonym w następnej linii ponieważ jest typu block. Pamiętaj, że aby te pseudo-elementy działały musimy zdefiniować właściwość content, choćby miała pustą (”) wartość.

Pseudo-elementy w JavaScript

Niestety nie jesteśmy w stanie wyszukać pseudo-elementów za pomocą JS. Musimy wykorzystać inne rozwiązania, aby móc nimi manipulować.

Odczytywanie właściwości CSS

Jeśli chcemy odczytać reguły zdefiniowane w CSS za pomocą JS musimy do tego wykorzystać funkcje window.getComputedStyle(). Pozwala ona pobrać przypisane do danego elementu style. W naszym przypadku wyglądałoby to w taki sposób:

var div = document.querySelector('div'); 
var styles = window.getComputedStyle(div, ':after');
var borderColor = styles.getPropertyValue('border-color');

Niestety to co zwraca funkcja getComputedStyle (czyli obiekt CSSStyleDeclaration) nie pozwala zmienić ustawień CSS.

Zmiana ustawień CSS

Na szczęście jesteśmy w stanie zmienić właściwości w sposób mniej wyrafinowany. W pierwszej kolejności możemy po prostu zdefiniować kod CSS i umieścić go w znaczniku style, który dodanym jako ostatni element dla elementu head np.:

const style = document.head.appendChild(document.createElement("style"));
style.innerHTML = "div::before {background: blue;}";

Możemy również zdefiniować odpowiednią klasę w pliku CSS i po prostu dodać ją do naszego div-a.

<style>
div::before {
  content: 'Nowy wiersz';
  display: inline;
  border: 1px solid red;
}

div::after {
  content: '--';
  display: block;
  border: 1px solid green;
}

div.newClass::after {
  border-width: 5px;
}
</style>

<div>
  <span>Jakaś treść</span>
</div>

var div = document.querySelector('div');
div.classList.add('newClass');

Usuwanie (ukrywanie) elementów

Ponieważ nie jesteśmy w stanie wyszukać elementu to i nie będziemy mogli go usunąć. Możemy jednak podobnie jak przy zmianie właściwości dodać inną klasę do element (np. hide-after) i zdefiniować właściwość display: none.

.hide-after::after {
  display: none;
}