CSS ::marker pseudo-elemento

Pagsasaayos at Paggamit

CSS ::marker Ang pseudo-elemento ay ginagamit upang itakda ang estilo ng marka ng item ng listahan.

Ang pseudo-elemento na ito ay magagamit sa anumang elemento na itinakda sa display: list-item.

Babala:Ang mga sumusunod na katangian ay maaaring gamitin sa ::marker Ginagamit ng magkakasama:

• Lahat ng katangian ng font
• Lahat ng katangian ng animasyon
• Lahat ng katangian ng paglilipat
• kulay
• white-space
• nilalaman
• text-combine-upright
• unicode-bidi
• direksyon

Sample

Halimbawa 1

Itakda ang kulay at sukat ng font sa lahat ng marka ng item ng listahan:

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

Subukan Nang Personal

Halimbawa 2

Itakda ang nilalaman, kulay at sukat ng font sa marka ng item ng listahan ng <ul>:

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

Subukan Nang Personal

Halimbawa 3

Itakda ang <h2> elemento sa display: list-item at magtatakda ng estilo sa marka ng item ng listahan at kulay:

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;
}

Subukan Nang Personal

CSS Grammar

::marker {
  css declarations;
}

Detalye ng Teknolohiya

Suporta ng Browser

Ang mga numero sa talahanayan ay tumutukoy sa unang bersyon ng browser na ganap na sumusuporta sa pangunahing elemento ng pangwari.

Sanggunian ng pahina

Tuturial:CSS 伪元素