So vergrößern Sie ein Aufzählungszeichen in HTML

Die Größe eines Aufzählungszeichens wird durch den Browser, die Schriftart und die Schriftgröße bestimmt. Obwohl Sie manchmal die Schriftgröße erhöhen können, um die Aufzählungszeichen zu vergrößern, ist es eine bessere Lösung, ein Bild als Aufzählungszeichen zu verwenden.

Um ein Aufzählungszeichen in ein Bild umzuwandeln, verwenden Sie CSS auf Ihrer Seite ähnlich wie im folgenden Beispiel.

<style type="text/css">
ul {
 list-style: none;
}
ul li {
 background: url(https://www.computerhope.com/issues/pictures/bullet.gif) no-repeat top left;
 background-position: 0 5px;
 line-height: 1.5625;
 padding: 0 0 4px 30px;
 margin-left: 1em;
}
</style>

Im obigen CSS-Code setzen wir zuerst die

-Tags so, dass kein Listenstil angezeigt wird, wodurch das Aufzählungszeichen aus der ungeordneten Liste entfernt wird. Als nächstes setzen wir „ul li“, um nur das Erscheinungsbild von
• -Tags zu ändern, die in den
  -Tags enthalten sind. In der ersten Zeile dieses Abschnitts befindet sich der Hintergrund, der auf das Aufzählungsbild zeigt, das wir im Beispiel verwenden. Alle anderen Linien geben die Polsterung und den Rand um die Kugel an.
  Tipp

  Sie können auch eine CSS-Klasse erstellen, wenn Sie ein einzelnes Aufzählungszeichen oder eine ausgewählte Gruppe von Aufzählungszeichen in einer Liste ändern möchten.

  Nachdem der Code erstellt wurde, verwendet jede ungeordnete HTML-Liste das Aufzählungszeichenbild als Aufzählungszeichen.

  Beispiel HTML-Code

  <ul>
   <li>First bullet example</li>
   <li>Second bullet example</li>
  </ul>

  Ergebnisse von HTML-Code unter Verwendung des Beispiel-CSS

  • Beispiel für den ersten Aufzählungspunkt
  • Beispiel für den zweiten Aufzählungspunkt