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

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

Σύνταξη

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

Результат:

Δείτε επίσης