CSS ::before ψευδοστοιχείο

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

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

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

• παράδειγμα: content: "Hello world!";
• εικόνα: content: url(myimage.jpg);
• χωρίς περιεχόμενο: content: none;
• μετρητές: content: counter(li);
• παραθέσεις: content: open-quote;
• content: " (" attr(href) ")";

τιμές συμβολοσειράς:Παρακαλώ σημειώστε ότι το εισαχθέν περιεχόμενο παραμένει μέσα στο καθορισμένο στοιχείο. Το εισαχθέν περιεχόμενο θα προστεθεί πριν από άλλο περιεχόμενο εντός του στοιχείου.

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

παράδειγμα

παράδειγμα 1

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

p::before {
  content: "Διαβάστε αυτό: ";
}

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

παράδειγμα 2

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

p::before {
  content: "Διαβάστε αυτό -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

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

σύνταξη CSS

::before {
  declarations css;
}

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

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

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

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

οδηγός:CSS ψευδοεлемент

παραπομπή:CSS ::after ψευδοεлемент