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 ansehen

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.

 

Kompatibilität

Dieses Script habe ich zuvor in folgenden Browsern getestet:

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

In diesen Browsern funktionierte das Script dabei ohne Probleme. Ich kann leider nicht sagen, ob dieses Beispiel darüber hinaus auch mit älteren oder hier nicht aufgeführten Browsern funktioniert.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.