Wie erstelle ich Listen im Bindestrich-Stil in HTML: Über die Standard-Aufzählungsstile hinaus?

Anpassung des HTML-Listenstils: Erstellen von Listen mit Bindestrichen

In HTML wird die Eigenschaft list-style-type verwendet, um den Aufzählungsstil für Listenelemente anzugeben. Allerdings werden Bindestriche als Aufzählungszeichen nicht nativ unterstützt.

Verwendung der Pseudoklasse „:before“

Ein Ansatz zum Erstellen einer Liste im Strichstil ist die Verwendung der Pseudoklasse „:before“. Dadurch können Sie Inhalte vor jedem Listenelement einfügen und ihn unabhängig formatieren.

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

Die Content-Eigenschaft fügt den Bindestrich „-“ vor jedem Li ein, und margin-right sorgt für etwas Platz zwischen dem Bindestrich und der Liste Elementtext.

Texteinzug verwenden

Um den Effekt der eingerückten Liste bei Verwendung der :before-Pseudoklasse beizubehalten, können Sie einen negativen Texteinzug auf die Listenelemente anwenden.

<code class="css">ul.dashed > li {
  text-indent: -5px;
}</code>

Dies wirkt der standardmäßigen Einrückung entgegen, die durch die Aufzählungszeichengestaltung entsteht, und richtet den Bindestrich am Anfang des Listenelementtexts aus.

Anpassung generischer Listenzeichen

Um ein generisches Zeichen als Liste zu verwenden Aufzählungszeichen können Sie einfach in der List-Style-Type-Eigenschaft angeben, z. B.:

<code class="css">ul.generic {
  list-style-type: disc;
}

ul.square {
  list-style-type: square;
}

ul.circle {
  list-style-type: circle;
}</code>

Dadurch können Sie Listen mit unterschiedlichen Aufzählungszeichenformen erstellen und das visuelle Erscheinungsbild Ihrer Listen nach Bedarf anpassen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich Listen im Bindestrich-Stil in HTML: Über die Standard-Aufzählungsstile hinaus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!