Ατριβή ::after ψευδο-στοιχείο

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

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

Χρήση content Η τιμή του attributes καθορίζει το περιεχόμενο που πρέπει να εισαχθεί. Η τιμή του 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 {
  declarations css;
}

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

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

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

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

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

Αναφορά:Ατριβή ::before ψευδο-στοιχείο