Wie formatiere ich HTML-Listen mit Dash-Listenmarkierungen mithilfe von CSS?

HTML-Listen mit Strichlistenmarkierungen formatieren

In HTML ist der standardmäßige Listenstiltyp „Disc“, der Aufzählungspunkte darstellt . Um stattdessen eine Liste mit Strichmarkierungen zu erstellen, können Sie CSS verwenden.

Eine Lösung besteht darin, die Eigenschaft text-indent zu verwenden, um die Listenelemente und den Inhalt einzurücken Eigenschaft des Pseudoelements :before zum Einfügen eines Bindestrichs.

Beispiel:

<code class="css">ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}</code>

HTML:

<code class="html"><ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul></code>

Ergebnis:

- First
- Second
- Third

Mit diesem Ansatz können Sie den Effekt der eingerückten Liste beibehalten und gleichzeitig eine Strichmarkierung hinzufügen.

Generische Listenmarkierungen:

Sie können jedes Unicode-Zeichen als Listenmarkierung verwenden, indem Sie die Eigenschaft content des Pseudoelements :before auf setzen Der HTML-Entitätscode des gewünschten Zeichens. Um beispielsweise ein Sternchen (*) zu verwenden, verwenden Sie:

<code class="css">ul > li:before {
  content: "*";
}</code>

Das obige ist der detaillierte Inhalt vonWie formatiere ich HTML-Listen mit Dash-Listenmarkierungen mithilfe von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!