CSS ::marker tekoelementti

Määrittely ja käyttö

CSS ::marker Tekoelementti käytetään listan kohteen merkinnän tyylittelyyn.

Tämä tekoelementti sopii mihin tahansa elementtiin, jolle on asetettu display: list-item.

Huomaa:Seuraavat ominaisuudet voidaan käyttää ::marker Yhdessä käytettävissä:

• Kaikki fonttimuodot
• Kaikki animaatioominaisuudet
• Kaikki siirtymäominaisuudet
• color
• white-space
• content
• text-combine-upright
• unicode-bidi
• suunta

Esimerkki

Esimerkki 1

Määritä kaikkien listan kohteen merkintöjen väri ja fonttikoko:

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

Kokeile itse

Esimerkki 2

Määritä <ul> -listan kohteen merkinnän sisältö, väri ja fonttikoko:

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

Kokeile itse

Esimerkki 3

Aseta <h2> -elementti display: list-item ja määritä listan kohteen merkinnän väri ja sisältö:

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

Kokeile itse

CSS syntaksi

::marker {
  css lausunnot;
}

Tekninen yksityiskohta

Selaimen tuki

Taulukossa olevat numerot määrittävät ensimmäisen selaimen version, joka täysin tukee tätä tekoelementtiä.

Liittyvät sivut

Ohje:CSS tekeekoodi-elementti