Ψευδοεлемент CSS ::marker

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

CSS ::marker Το ψευδοεлемент χρησιμοποιείται για τη ρύθμιση του στυλ της ετικέτας του στοιχείου της λίστας.

Αυτό το ψευδοεлемент είναι κατάλληλο για οποιοδήποτε στοιχείο που έχει ρυθμιστεί ως display: list-item.

Σημείωση:Οι παρακάτω ιδιότητες μπορούν να χρησιμοποιηθούν με ::marker Χρήση μαζί:

• Όλες οι ιδιότητες των γραμματοσειράς
• Όλες οι ιδιότητες της αニμασίας
• Όλες οι μεταβατικές ιδιότητες
• color
• white-space
• content
• text-combine-upright
• unicode-bidi
• direction

Παράδειγμα

Παράδειγμα 1

Ρυθμίστε τον χρώμα και το μέγεθος γραμματοσειράς της ετικέτας όλων των στοιχείων της λίστας:

::marker {
  font-size: 20px;
  color: red;
}

Προσπάθησε να το δοκιμάσεις!

Παράδειγμα 2

Ρυθμίστε το περιεχόμενο, τον χρώμα και το μέγεθος γραμματοσειράς της ετικέτας του στοιχείου της λίστας <ul>:

ul li::marker {
  content: "@ ";
  color: pink;
  font-size: 25px;
}

Προσπάθησε να το δοκιμάσεις!

Παράδειγμα 3

Ρυθμίστε το στοιχείο <h2> ως display: list-item και ορίστε το περιεχόμενο και τον χρώμα της ετικέτας του στοιχείου της λίστας:

h2 {
  counter-increment: h2;
  display: list-item;
}
h2::marker {
  display: list-item;
  content: "@" counter(h2) " ";
  color: lightgreen;
}
body {
  counter-reset: h2;
  font-family: verdana;
  margin: 50px;
}

Προσπάθησε να το δοκιμάσεις!

Γλωσσική γραμματική CSS

::marker {
  declarations css;
}

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

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

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

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

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