Wie ersetze ich HTML-Listenaufzählungszeichen durch Bindestrichsymbole?

Anpassen von Listenstilen in HTML mit Strichsymbolen

In HTML wird der Standardlistenstil als Scheibe oder Quadrat dargestellt, aber Sie Möglicherweise möchten Sie den Aufzählungspunkt mit einem Bindestrich-Symbol anpassen. Um dies zu erreichen, können Sie CSS nutzen, um das Erscheinungsbild der Liste zu ändern.

Verwendung der :before-Pseudoklasse

Ein Ansatz besteht darin, die :before-Pseudoklasse zu verwenden, um eine einzufügen Bindestrich vor jedem Listenelement. Mit dieser Technik können Sie die standardmäßige Listeneinrückung beibehalten und gleichzeitig einen Bindestrich hinzufügen. Allerdings kann dieser Ansatz aufgrund unterschiedlicher CSS-Unterstützung zu potenziellen Kompatibilitätsproblemen zwischen verschiedenen Browsern führen.

Kombination von list-style-type mit text-indent

Zuverlässiger Die Lösung besteht darin, list-style-type: none zu verwenden, um das Standardaufzählungszeichen zu entfernen, und dann text-indent auf einen negativen Wert zu setzen, um den Effekt der eingerückten Liste beizubehalten. Darüber hinaus können Sie :before verwenden, um das Bindestrichsymbol einzufügen und so eine konsistente Darstellung in allen Browsern sicherzustellen.

Beispielcode

<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>

Verwendung und Ausgabe

In Ihrem HTML können Sie die gestrichelte Klasse auf die ungeordnete Liste (

) anwenden:

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

Dadurch wird beim Beibehalten eine benutzerdefinierte Liste mit Bindestrichen als Aufzählungspunkten erstellt die Listeneinrückung:

• Erste
• Zweite
• Dritte

• Erste

  • Zweite
  • Drittens

Diese Methode ist browserübergreifend kompatibel und ersetzt effektiv den Standardlistenstil durch benutzerdefinierte Bindestriche.

Das obige ist der detaillierte Inhalt vonWie ersetze ich HTML-Listenaufzählungszeichen durch Bindestrichsymbole?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!