Ιδιότητα content

Η ιδιότητα content επιτρέπει την εισαγωγή αυθαίρετου παραγόμενου κειμένου σε ετικέτες. Εφαρμόζεται σε συνδυασμό με τα ψευδοστοιχεία after και before.

Σύνταξη

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

Результат:

Δείτε επίσης