Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Linda Hamilton
Freigeben: 2024-11-01 11:31:30
Original
883 Leute haben es durchsucht

How to Style HTML Lists with Dash List Markers Using 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>
Nach dem Login kopieren

HTML:

<code class="html"><ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul></code>
Nach dem Login kopieren

Ergebnis:

- First
- Second
- Third
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage