Dreieckige Aufzählungszeichen

Mit Hilfe von CSS kannst du zum Beispiel dreieckige Aufzählungszeichen erstellen. Somit müssen auf einer Website Listen nicht immer mit runden Bulletpoints versehen werden. Je nach Design der eigenen Website, passen dreieckige Aufzählungszeichen vielleicht sogar viel besser.

Zum Glück bietet CSS da sehr viel Spielraum für die Gestaltung. In diesem Artikel zeige ich dir ein Beispiel, mit dem du ebenfalls dreieckige Aufzählungslisten für deine Website erstellen kannst.

Dreieckige Aufzählungszeichen mit CSS

Um dreieckige Aufzählungszeichen zu erstellen, brauchst zum Beispiel nur nachstehenden CSS Code in dein Stylesheet einbinden. Folglich zeigt der Browser danach alle Aufzählungslisten auf deiner Website dreieckig an.


Beispiel:

ul {
    margin: 0.75em 0;
    padding: 0 1em;
    list-style: none;
}
 
li:before { 
    content: "";
    border-color: transparent #111;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;
}


Anzeigebeispiel:

Folge einfach diesem Link (öffnet in einem neuen Tab), um dir das Anzeigebeispiel anzusehen.


Den eben genannte Code musst du im Grunde genommen nur in dein Stylesheet einbinden. Du brauchst aber keine weiteren Attribute den vorhandenen Tags hinzufügen. Die Umsetzung sollte automatisch erfolgen. Zeigt dein Browser keine Veränderung an, lade einfach das Stylesheet neu. Rufe dazu die URL der CSS Datei im Browser direkt auf. Dein Browser sollte das Stylehseet nun anzeigen. Drücke nun einmal die Taste F5 oder auf „Aktualisieren“. Der Browser liest das Stylesheet dadurch neu ein.

Wenn du deine Website jetzt wieder aktualisierst, solltest du die Veränderung direkt sehen können.

Browser Test

Das oben genannte CSS Snippet habe ich überdies in folgenden Browsern getestet.

  • Google Chrome 32
  • Firefox 27
  • Internet Explorer 11
  • Opera 19
  • Safari (iPhone Version, iOS 7.0.5)

In den genannten Browsern funktioniert das Snippet dabei einwandfrei. Ich kann jedoch leider nicht versichern, dass dieses CSS Snippet auch in hier nicht aufgeführten Browsern funktioniert.