:: merkki - CSS-temppuja

Anonim

::marker Pseudo-elementti on muotoilu tyylillisiin markkeri luettelon elementin. Esimerkiksi oletuksen luettelomerkki

    (esim. •) tai oletusnumero
      (esim. 1.). Tämän vuoksi on erittäin helppoa tehdä yksinkertaisia ​​asioita, kuten värittää ne.

      ::markerPseudoelementin tavoin voit valita tarkastettavaksi DevTools-sovelluksessa, mutta se ei oikeastaan ​​ole "DOM: ssa" kuin normaali elementti.

      Chrome DevTools valitsee ::markernäennäiselementin ja näyttää tyylit.

      Voit yhdistää ::markerkanssa contentkiinteistön muuttaa mitä merkki on. Esimerkiksi luettelomerkkien korvaaminen emojilla:

      Jos vaihdat display kiinteistön list-itemtahansa elementtiin, voit hallita sen ::marker. Tässä

      elementit on numeroitu, mikä yhdistää ajatuksen CSS-laskureista:

      Merkit ovat edelleen luettelomerkkejä, joten niihin sovelletaan esimerkiksi list-style-position.

      Liittyvät

      Artikkeli 5. toukokuuta 2020

      Luettelotyyli Reseptit

      Chris Coyier

      Lisää tietoa

      • Spec

      Selaimen tuki

      Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.

      Työpöytä

      Kromi Firefox IE Reuna Safari
      86 68 Ei 86 11.1

      Matkapuhelin / tabletti

      Android Chrome Android Firefox Android iOS Safari
      88 85 81 11.3-11.4