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

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

Σύνταξη

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

Παράδειγμα

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

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

cssli:hover::before {
  content: '!!!';
}

Результат:

Παράδειγμα

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

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

cssli:hover::before {
  color: red;
  content: '!!!';
}

Результат:

Δείτε επίσης