Detaillierte Erklärung des CSS-Pseudoelements::marker

Dieser Artikel stellt ein interessantes Pseudoelement in CSS ::marker vor. Damit können wir unsere Textzahlen interessanter gestalten!

Was ist ::marker

Das CSS-Pseudoelement ::marker ist ein relativ neues Pseudoelement, das in CSS Pseudo-Elements Level 3 hinzugefügt und in CSS Pseudo-Elements Level 4 verbessert wurde. Es wird von Browsern ab Chrome 86+ unterstützt.

Damit können wir einem Element ein Pseudoelement hinzufügen, um ein Aufzählungszeichen oder eine Nummer zu generieren.

Normalerweise haben wir folgenden Aufbau:

<ul>
  <li>Ansteckend</li>
  <li>Phasen</li>
  <li>Seiten</li>
  <li>Mutig</li>
  <li>Shaymus</li>
  <li>Gesichtslos</li>
</ul>

Standardmäßig werden keine speziellen Stile hinzugefügt und der Stil sieht ungefähr so ​​aus:

Mit ::marker können wir den kleinen Punkt vor der Seriennummer umwandeln:

li {
  Polsterung links: 12px;
  Cursor: Zeiger;
  Farbe: #ff6000;
}
li::marker {
  Inhalt: '>';
}

Wir können die kleinen Punkte in alles verwandeln, was wir wollen:

Einige Einschränkungen des ::marker-Pseudoelements

Zunächst einmal ist das einzige Element, das auf ::marker reagieren kann, ein Listenelement. Beispielsweise sind li in ul und li in ol beide Listenelemente.

Das heißt natürlich nicht, dass es nicht auch für andere Elemente verwendet werden kann. Zusätzlich zu Listenelementen können wir ::marker für jedes Element verwenden, für display: list-item gesetzt ist.

Zweitens können nicht alle Stilattribute für die Stile innerhalb von Pseudoelementen verwendet werden. Derzeit können wir nur diese verwenden:

• alle Schrifteigenschaften -- alle zugehörigen Schrifteigenschaften
• Farbe – Farbwert
• die content-Eigenschaft – Inhaltsinhalt, ähnlich dem Inhalt des ::before-Pseudoelements, der zum Ausfüllen des Seriennummerninhalts verwendet wird
• text-combine-upright (en-US), Unicode-Bidi und Richtungseigenschaften – Dokumentschreibrichtung bezogen

::Marker-Anwendungserkundung

Beispielsweise sehen wir oft einige Verzierungen vor dem Titel:

Alternativ können wir Emoji-Ausdrücke verwenden:

Beide sind sehr gut für die Anzeige mit ::marker geeignet. Beachten Sie, dass display: list-item für Nicht list-item verwendet werden sollte:

<h1>Lorem ipsum dolor sit amet</h1>
<h1>Lorem ipsum dolor sit amet</h1>

h1 {
  Anzeige: Listenelement;
  Polsterung links: 8px;
}
h1::Markierung {
  Inhalt: ▍‘;
}
h1:n-tes-Kind(2)::Markierung {
  Inhalt: „😅“;
}

CodePen-Demo – ::marker-Beispiel

::Marker kann sich dynamisch ändern

Interessanterweise kann sich ::marker immer noch dynamisch ändern, und damit können Sie ganz einfach einige interessante Hover-Effekte erstellen.

Dies ist beispielsweise die Auswirkung davon, unglücklich zu sein, wenn man nicht ausgewählt wird, und glücklich, wenn man ausgewählt wird:

li {
  Farbe: #000;
  Übergang: .2s alles;
}
li:hover {
  Farbe: #ff6000;
}
li::marker {
  Inhalt: „😩“;
}
li:hover::marker {
  Inhalt: „😁“;
} 

CodePen-Demo – ::marker-Beispiel

Verwendung mit Zähler

Es kann beobachtet werden, dass ::marker ::before und ::after sehr ähnlich ist, da sie alle über ein content verfügen.

Im content können tatsächlich einige einfache Zeichenfolgenadditionsoperationen durchgeführt werden. Damit können wir die CSS-Zähler counter-reset und counter-increment verwenden, um dem ::marker Element Seriennummern hinzuzufügen.

Wenn Sie nicht viel über counter-increment können Sie hierhin gehen: MDN – Counter-Increment

Angenommen, wir haben das folgende HTML:

<h3>Lorem ipsum dolor sit amet.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h3>Es ist sehr schwer, ein Baby großzuziehen.</h3>
<p>Ist es fair zu sagen, dass es so etwas wie einen Voluptatibus, einen Schuldner, nicht gibt?</p>
<h3>Ich bin so glücklich!</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Wir verwenden ::marker und den CSS-Zähler counter-increment , um eine geordnete Liste mit automatischer Zählung und einem Emoji-Ausdruck vor h3 zu implementieren:

Körper {
  Zähler-Reset: h3;
}

h3 {
  Zählerinkrement: h3;
  Anzeige: Listenelement;
}

h3::Markierung {
  Anzeige: Listenelement;
  Inhalt: "✔" Zähler(h3) " ";
  Farbe: Helllachs;
  Schriftstärke: fett;
}

Die Auswirkung ist wie folgt, wodurch der Effekt des automatischen Hinzufügens von Seriennummern zu ::marker Elementen realisiert wird:

CodePen-Demo – ::marker-Beispiel

endlich

Dieser Artikel stellt vor, was ::marker ist und einige seiner praktischen Szenarien. Es ist ersichtlich, dass, obwohl ::before und ::after auch ähnliche Funktionen erreichen können, CSS immer noch ein semantischeres Tag ::marker bietet, was auch zeigt, dass jeder der Semantik seines Front-End-Codes (HTML/CSS) mehr Aufmerksamkeit schenken muss.

Nun, dieser Artikel endet hier, ich hoffe, er hilft Ihnen 😃

Weitere wunderbare technische CSS-Artikel sind in meinem Github – iCSS – gesammelt. Sie werden ständig aktualisiert. Klicken Sie einfach auf einen Stern, um sich anzumelden und zu sammeln.

Wenn Sie Fragen oder Anregungen haben, können Sie sich gerne an mich wenden. Dies ist ein Originalartikel und meine Schreibfähigkeiten sind begrenzt. Wenn der Artikel etwas falsch enthält, lassen Sie es mich bitte wissen.

Dies ist das Ende dieses Artikels über CSS ::marker, um Textzahlen interessanter zu gestalten. Weitere relevante CSS ::marker-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!