Ο ψευδο-στοιχείο before

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

Σύνταξη

επιλογέας::before {
	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::before {
	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::before {
	color: red;
	content: '!!!';
}

Δείτε επίσης

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