CSS ::after pseudo-element

Ορισμός και χρήση

CSS ::after Τα ψευδοστοιχεία χρησιμοποιούνται για την εισαγωγή περιεχομένου μετά το περιεχόμενο του καθορισμένου στοιχείου.

Χρήση content Ορίζει το περιεχόμενο που πρέπει να εισαχθεί. Η τιμή του content μπορεί να είναι:

• Αλφαβητική αλυσίδα: content: "Hello world!";
• Εικόνα: content: url(myimage.jpg);
• Χωρίς περιεχόμενο: content: none;
• Μετρητής: content: counter(li);
• Απόκλειστος: content: close-quote;
• Τιμή ιδιότητας: content: " (" attr(href) ")";

Συμβουλή:Λάβετε υπόψη ότι το περιεχόμενο που εισάγεται παραμένει εντός του καθορισμένου στοιχείου. Το περιεχόμενο που εισάγεται θα προστεθεί μετά το άλλο περιεχόμενο του στοιχείου.

Χρήση ::before Εισάγετε περιεχόμενο πριν από το περιεχόμενο συγκεκριμένου στοιχείου.

Παράδειγμα

Παράδειγμα 1

Εισάγετε μια αλφαβητική αλυσίδα μετά το περιεχόμενο κάθε <p> στοιχείου:

p::after {
  content: " - θυμηθείτε το";
}

Δοκιμάστε προσωπικά

Παράδειγμα 2

Εισάγετε μια αλφαβητική αλυσίδα μετά το περιεχόμενο κάθε <p> στοιχείου και ρυθμίστε το στυλ του εισαχθέντος περιεχομένου:

p::after {
  content: " - θυμηθείτε το";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

Δοκιμάστε προσωπικά

Γλώσσα CSS

::after {
  θέσεις css;
}

Τεχνικά λεπτομέρειες

Υποστήριξη προγραμμάτων περιήγησης

Τα αριθμήματα των προγραμμάτων περιήγησης καθορίζουν την πρώτη έκδοση που υποστηρίζει πλήρως το ψευδοεлемент.

Σχετικές σελίδες

Εκμάθηση:CSS ψευδοεлемент

Reference:CSS ::before pseudo-element