li ul: Aufzählung Listensymbol ändern

    Hallo Leute,
    sieht lang aus, aber die Frage ist recht schlicht – versprochen! ;)
    Das Thema ist natürlich hier und anderswo schon vielfach behandelt worden und ich durchforste auch schon viele Stunden das Netz, denn das Problem steckt im Detail und dafür fand ich bisher keine Antwort.

    Was ich will:
    Ich möchte das Aufzählungszeichen einer ungeordneten Liste individuell gestalten.
    Soweit kein Ding. Dazu habe ich folgende Lösung so oder so ähnlich mehrfach im Web gefunden:

    .aem-list0 li{
    list-style-type: none;
    margin-bottom: 0.7em;}

    .aem-list0 li::before{
    content: "›︎";
    font-size: 1.5em;
    font-weight: 700;
    color: #b71722;}

    Im Original sieht die Liste wie im Bild "Standard" aus. Nach dieser CSS-Zuweisung wie in "Liste 0"

    Das Problem:
    Wie man sieht, ist das Zeichen verrutscht und weitere Zeilen nicht eingerückt.

    Meine Lösung:
    Ich habe nun mit margin und padding mir alles zurechtgerückt, bis es optisch für mein ausgewähltes Zeichen und dessen Größe passt. Fühlt sich aber gefuscht an und ist es sicherlich auch. :D


    Die Frage:
    Gibt es eine elegantere (richtige) Lösung, wie man die Liste sauber formatiert?
    (Und warum ist sie überhaupt bei list0 so verschoben obwohl ich doch nur das Symbol ersetzt habe?)


    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Ich würde das in etwa so lösen:

    Code
    ul{padding-left: 20px}
li{list-style-type: none;}
li:before {content: ">";margin-left: -20px;margin-right: 10px;}


    Eine ul hat, wenn man es nicht ändert, ein padding-left und dort sind die List-Icons platziert. Wenn du die deaktivierst und mit li:before "ersetzt", fangen diese bei der eigentlichen Aufzählung an. Also korrigierst du das mit Minus-Margin wieder.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Ach, ich Dödel hatte vergessen, noch mein CSS zu "list1" zu posten. Ist nun aber auch egal. Habe dein CSS nun genommen, meinen Wünschen angepasst und es sieht nun genauso aus wie mein Screenshot von "List1" (nur nicht so umständlich umgesetzt). Ganz vielen Dank für die Info und das CSS!! :)

    Für alle, die's interessiert hier mein abschließendes CSS:

    Code
    .aem-list2 ul{padding-left: 10px}
.aem-list2 li{list-style-type: none;margin-bottom: 0.7em;}
.aem-list2 li:before {
    content: "›";
    font-size: 1.5em;
    font-weight: 700;
    color: #b71722;
    margin-left: -30px;
    margin-right: 20px;}

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden