Zum Hauptinhalt springen

Ahora es trivial personalizar el color, el tamaño o el tipo de número o viñeta cuando se usa un

igraal_de-de
    oder
    .


    Aktualisiert

Gracias a Igalia, patrocinada por Bloomberg, finalmente podemos guardar nuestros trucos para las listas de estilos. ¡Ver!

marker-fun-1069220
Quelltext anzeigen

Dank an CSS :: marker podemos cambiar el contenido y algunos de los estilos de viñetas y números.

Browser-Kompatibilität

Wann Chromium 86-Versionen, :: marker será compatible con Firefox para escritorio y Android, Safari de escritorio e iOS Safari, y navegadores de escritorio y Android basados ​​en Chromium. Ver MDN Browser-Kompatibilität Tabelle aktualisieren.

Pseudoelemente

Betrachten Sie die folgende wichtige HTML-Liste:

<Ul>
< li > Lorem ipsum Schmerz sitzen amet consectetur adipisicing elit li >
< li > Dolores quaerat illo totam porro
li >
< li > Quidem aliquid perferendis voluptiert
li >
< li > Ipsa adipisci fugit davon ausgeht, dass dicta nihil reprehenderit konsequatur alias Facilis rem
li >
< li > Leck
li >
ul >

Lo que da como resultado la siguiente representación poco sorprendente:

Der Punkt am Anfang von jedem

  • ¡El artículo es gratis! El navegador está dibujando y creando un cuadro de marcador generado para usted.

    Heute freuen wir uns, über das zu sprechen :: marker pseudoelemento, que le da la capacidad de diseñar el elemento de viñeta que los navegadores crean para usted.

    Término clave:
    Un pseudoelemento representa un elemento del documento distinto de los que existen en el árbol del documento. Por ejemplo, puede seleccionar la primera línea de un párrafo usando el pseudoelemento p :: erste Zeile, aunque no hay ningún elemento HTML que envuelva esa línea de texto.

    Lesezeichen erstellen

    das :: marker El cuadro de marcador de pseudo-elemento se genera automáticamente dentro de cada elemento del elemento de la lista, antes del contenido real y el :: Vor Pseudoelement.

    li :: before {
    Inhalt : ":: vor" ;
    Hintergrund : hellgrau ;
    Grenzradius: 1ch;
    Polsterung inline : 1ch ;
    Rand-Inline-Ende : 1ch ;
    }}

    In der Regel sind die Elemente in der Liste

  • Elementos HTML, pero otros elementos también pueden convertirse en elementos de lista con Anzeige: Listenelement.

    < dl >
    < dt > Lorem dt >
    < dd > Lorem ipsum Schmerz sitzen amet consectetur adipisicing elit
    dd >
    < dd > Dolores quaerat illo totam porro
    dd >

    < dt > Ipsum dt >
    < dd > Quidem aliquid perferendis voluptiert
    dd >
    dl >

    dd {
    display: list-item;
    list-style-type: "🤯";
    padding-inline-start: 1ch;
    }

    Einen Marker kämmen

    Bis um :: marker, las listas se pueden diseñar usando Listenstil-Typ y Listenstil-Bild para cambiar el símbolo del elemento de la lista con 1 línea de CSS:

    li {
    list-style-image: url(/right-arrow.svg);
    list-style-type: '👉';
    padding-inline-start: 1ch;
    }

    Eso es útil, pero necesitamos más. ¿Qué hay de cambiar el color, el tamaño, el espaciado, etc.? Ahí es donde :: marker viene al rescate. Permite la orientación individual y global de estos pseudoelementos de CSS:

    li :: marker {
    Farbe : Hotpink ;
    }}

    li: erstes Kind :: Marker {
    Schriftgröße : 5rem ;
    }}

    Precaución:
    Si la lista anterior no tiene viñetas rosas, entonces :: marker Es ist nicht mit Ihrem Browser kompatibel.

    das Listenstil-Typ Das Anwesen bietet nur sehr begrenzte Gestaltungsmöglichkeiten. das :: marker pseudoelemento significa que puede apuntar al marcador en sí y aplicarle estilos directamente. Esto permite un mayor control.

    Davon abgesehen können Sie nicht alle CSS-Eigenschaften in a verwenden :: marker. La lista de propiedades permitidas y no permitidas se indica claramente en la especificación. Si prueba algo interesante con este pseudoelemento y no funciona, la lista a continuación es su guía sobre lo que se puede y no se puede hacer con CSS:

    CSS erlaubt :: marker Eigenschaften

    • Animation- *
    • Überleitung- *
    • Farbe
    • Richtung
    • font- *
    • Inhalt
    • Unicode-Bidi
    • Leerraum

    Ändern Sie den Inhalt von a :: marker está hecho con Inhalt gegenüber Listenstil-Typ. Im folgenden Beispiel wird der Stil des ersten Elements verwendet Listenstil-Typ und der zweite mit :: marker. Die Eigenschaften im ersten Fall gelten für das gesamte Element in der Liste, nicht nur für die Markierung. Dies bedeutet, dass der Text genau wie die Markierung animiert wird. Wenn Sie verwenden :: marker Wir können nur auf das Markierungsfeld und nicht auf den Text zeigen.

    Además, tenga en cuenta cómo los no permitidos Hintergrund la propiedad no tiene ningún efecto.

    Listenstile

    li: n-tes Kind (1) {
    Listenstil-Typ : '?' ;;
    Schriftgröße : 2rem ;
    Hintergrund : hsl ( 200 20% 88% ) ;
    Animation : Farbwechsel 3s Easy-In-Out unendlich ;
    }}

    Gemischte Ergebnisse zwischen Lesezeichen und Listenelement

    Markierungsstile

    li: n-tes Kind (2) :: marker {
    Inhalt : '!' ;;
    Schriftgröße : 2rem ;
    Hintergrund : hsl ( 200 20% 88% ) ;
    Animation : Farbwechsel 3s Easy-In-Out unendlich ;
    }}

    Die Ergebnisse konzentrierten sich auf Marker und Listenelement

    Fallstricke!

    In Chrom, Leerraum funktioniert nur für darin platzierte Marker. Bei außen angebrachten Markierungen erzwingt der Stileinsteller immer Leerraum: vor um den endgültigen Raum zu erhalten.

    Ändern Sie den Inhalt eines Lesezeichens

    Estas son algunas de las formas en que puede diseñar sus marcadores.

    Ändern Sie alle Elemente in der Liste

    li {
    list-style-type: "😍";
    }

    li::marker {
    content: "😍";
    }

    Ändern Sie nur ein Element in der Liste

    li:last-child::marker {
    content: "😍";
    }

    Ändern Sie ein Listenelement in SVG

    li :: marker {
    Inhalt : URL ( /heart.svg ) ;
    Inhalt : URL ( #heart ) ;
    Inhalt : URL ( "Daten: Bild / SVG + XML; Zeichensatz = UTF-8, " ) ;
    }}

    Nummerierte Listen ändern
    ¿Qué tal un

      ¿aunque? El marcador en un elemento de lista ordenado es un número y no una viñeta por defecto. En CSS, estos se llaman Buchhaltery son bastante poderosos. Incluso tienen propiedades para establecer y restablecer donde comienza y termina el número, o cambiarlos a números romanos. ¿Podemos diseñar eso? Sí, e incluso podemos usar el valor del contenido del marcador para crear nuestra propia presentación de numeración.

      li::marker {
      content: counter(list-item) "› ";
      color: hotpink;
      }

      Depuración

      Chrome DevTools está listo para ayudarlo a inspeccionar, depurar y modificar los estilos que se aplican a :: marker Pseudoelemente.

      devtools-1804244

      Zukünftiger Stil von Pseudoelementen

      Puede obtener más información sobre :: marcador en:

      Es genial tener acceso a algo que ha sido difícil de diseñar. Es posible que desee poder diseñar otros elementos generados automáticamente. Podrías estar frustrado con

      o el indicador de autocompletar de entrada de búsqueda, cosas que no se implementan de la misma manera en todos los navegadores. Una forma de compartir lo que necesita es creando un deseo en https://webwewant.fyi.