CSS Pseudo-Class :before und :after mit jQuery manipulieren

Das Problem

Frontend-Entwickler nutzen gerne die Pseudo-Klassen :before und :after, um zum Beispiel eine Form mit CSS zu erstellen ohne, dass man dazu ein Hintergrundbild benutzen muss. Beispiel:

.top-header:before {
background: #00589d none repeat scroll 0 0;
height: 61px;
position: absolute;
right: 64px;
top: 0;
transform: skewX(-25deg);
width: 31px;
z-index: 9;
}

Mit diesem Code habe ich ein schräges Rechteck erzeugt. Aufgabe war es, falls sich die Fenstergröße verändert, dann soll sich auch die Position ‚right‘ verschieben. Der neue Wert wird durch jQuery berechnet und in eine Variable gespeichert. Jetzt hatte ich ein Problem, weil man in jQuery keine Pseudoklassen manipulieren kann. Folgendes funktioniert NICHT:

$('.top-header:before').css('right', variableNeuerWert+'px');

Die Lösung

$(document).ready(function ($) {
$(„<style type=’text/css‘ id=’pseudoClass‘></style>“).appendTo(jQuery(‚head‘));
}

Ist die Seite fertig geladen, dann wird in den Head-Bereich ein leeres CSS-Style mit der ID „pseudoClass“ hinzugefügt und genau dieses ist möglich im Nachineinen zu ändern. Verschiebt sich die Fenstergröße, dann wird folgender Code ausgeführt:

$('#pseudoClass').replaceWith("<style type='text/css' id='pseudoClass'>.top-header:before{right:" + variableNeuerWert + "px;}</style>");

„pseudoClass“ dient als Platzhalter und wird durch ein neues „<style>“, mit gewünschten Wert, ersetzt.