Ψευδοστοιχείο after

Το ψευδοστοιχείο after εισάγει κείμενο μετά το στοιχείο. Χρησιμοποιείται μόνο μαζί με την ιδιότητα content, που ορίζει το κείμενο που θα εισαχθεί.

Σύνταξη

επιλογέας::after {
	content: 'κείμενο';
}

Παράδειγμα

Ας κάνουμε έτσι ώστε όταν ο δείκτης του ποντικιού περνά πάνω από το li, στο τέλος του να εισάγεται κείμενο:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

li:hover::after {
	content: '!!!';
}

Παράδειγμα

Στο εισαγόμενο κείμενο μπορούν να εφαρμοστούν διάφορα στυλ. Ας το βάψουμε, για παράδειγμα, σε κάποιο χρώμα:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

li:hover::after {
	color: red;
	content: '!!!';
}

Δείτε επίσης

το ψευδοστοιχείο before,
που κάνει εισαγωγή πριν από το κείμενο της ετικέτας
τη συνάρτηση attr,
που παίρνει την τιμή του χαρακτηριστικού της ετικέτας
την ιδιότητα counter-increment,
που ορίζει αυτόματη αρίθμηση