Pseudo-Element :before und :after

Pseudo-Elemente sind defacto keine richtigen Elemente wie z.B. ein DIV.
Das bedeutet, dass man via JavaScript nicht direkt auf diese Elemente zugreifen kann.
Aber sie stehen einigen Elementen zu Verfügung, wobei es jedoch Einiges zu beachten gibt:

:before oder :after benötigen einen Content.
Folgendes darf der Content beinhalten:

Einen Text: content: "Hi there";
Ein Bild: content: url(image.png);
Nichts: content: "";
Ein Zähler: content: counter(a);
Ein Zitat: content: open-quote;
Den Wert eines Attributs: content: " (" attr(src) ")";

div:before{
content:' Text ';
}

:before und :after stehen in Abhängigkeit des Elternelementes (Parent) und richten sich nach ihm aus.
Das Elternelement sollte immer relativ in der Seite eingebunden werden.
Demzufolge können sich nun :before und :after absolute zu ihm ausrichten.

div.myClass{
   position:relativ;
}

div.myClass:before{
   content:' Text ';
   position:absolute; // oder auch relative
}

Über left, top, right und bottom können nun :before und :after innerhalb des DIV's ausgerichtet werden.

div.myClass:before{
   content:' Text ';
   position:absolute; // oder auch relative
   left:0;
   top:0;
}

div.myClass:after{
   content:' Text ';
   position:absolute; // oder auch relative
   right:0;
   bottom:0;
}

Wie anfangs schon erwähnt, haben wir mit JavaScript keinen direkten Zugriff auf die Pseudo-Elemente.

Ein Zugriff wie: document.querySelector('div.myClass:after') ist nicht möglich.

Wenn wir dennoch Einfluss auf die Pseudo-Elemente nehmen möchten, können wir via JavaScript dem Parent-Element eine weitere Klasse zuzuweisen.

Beispiel:

document.querySelector('div.myClass').classList.add('newClass');

Jetzt können wir via CSS arbeiten z.B.:

div.myClass.newClass:after{
   content:' Text ';
   position:absolute;
   right:0;
   bottom:0;
   background-color:green;
}

Doch sehen wir uns das Beispiel genauer an.

Kopiert Euch gerne den Code und probiert es aus: Code

Beispiel

Parent

Animation starten

Code


HTML:

<div class="myClass">
	Parent
</div>
<br>
<a href="javascript:setNewClass()">Animation starten</a>



CSS:

div.myClass{
	position:relative;
	width:100px;
	height:100px;
	margin:10px auto;
	background-color:white;
	color:black !important;
	text-align:center;
	line-height:100px;
	opacity:.7;
}

div.myClass:before{
	content:'before';
	position:absolute;
	top:0;
	left:0;
	width:50px;
	height:30px;
	background-color:green;
	color:black !important;
	text-align:center;
	line-height:30px;
	transition: top 1s, left 1s;
}

div.myClass:after{
	content:'after';
	position:absolute;
	right:0;
	bottom:0;
	width:50px;
	height:30px;
	background-color:yellow;
	color:black !important;
	text-align:center;
	line-height:30px;
	transition: right 1s, bottom 1s;
}

div.myClass.newClass:before{
	top: 70px;
	left: 50px;
	transition: top 1s, left 1s;
}

div.myClass.newClass:after{
	right: 50px;
	bottom: 70px;
	transition: right 1s, bottom 1s;
}



JavaScript:

let countAddList = 0;
function setNewClass(){
	
	// Nachsehen ob das Element existiert
	if( document.querySelector('div.myClass') ){
		if(countAddList == 0){
			
			// Klasse zuweisen
			document.querySelector('div.myClass').classList.add('newClass');
			countAddList++;
		}else{
			
			// Klasse löschen
			document.querySelector('div.myClass').classList.remove('newClass');
			countAddList = 0;
		}
	}
}