Problem beim letter-spacing

Hallo zusammen. Ich sitze gerade an einem Menü mit mehreren Punkten, was ich mit p style="padding-left: … schräg gesetzt habe (das ganze Menü ist also in einem Winkel angelegt. Der oberste Punkt ragt rechts raus und die anderen Punkte verjüngen sich nach links). Ich möchte beim drüberscollen der einzelnen Punkte ein letter-spacing haben, was sich nur nach links ausübt, also der letzte Buchstabe bleibt fix und die Buchstaben verschieben sich nur nach links raus. Weiss jemand wie ich das definieren kann?

Schöne Grüße

Johannes

text-align: right; würde ich versuchen. Zeichne ein Menü besser als Liste aus.

Besser du zeigst uns mal den code in HTML und CSS, weil so ist es etwas schwer nachzuvollziehen.

p style="padding-left: … schräg gesetzt habe (das ganze Menü ist also in einem Winkel angelegt.

Das schräg gesetzt im Zusammenhang mit padding left macht hier keinen Sinn.

@mermshaus
Hast du verstanden was er will? Ich bin wohl zu unintelligent dafür.

Das Menü hab ich als ul definiert. Vielleicht gibt es eine elegantere Lösung (die ich nicht kenne) das Menü schräg zu machen als mit padding-left (hab da jeden Menüpunkt einzeln im HTML-Dokument definiert).

HTML:

  • 1

  • 2

  • 3

  • 4

  • 5

  • (die Punkte wegdenken)

    …Menüpunkt1
    …Menüpunkt2
    …Menüpunkt3
    …Menüpunkt4
    …Menüpunkt5

    und so soll es beim drüberscrollen aussehen, also dass es nur nach links „ausbricht“

    …Menüpunkt1
    M e n ü p u n k t 2
    …Menüpunkt3
    …Menüpunkt4
    …Menüpunkt5

    Grüße

    [html]

    <head>
        <meta charset="utf-8" />
        <title>Demo</title>
        <style>
    
            ul {
                text-align: right;
            }
    
            a:hover {
                letter-spacing: 0.25em;
            }
    
            li.link-1 {
                padding-right: 100px;
            }
    
            li.link-2 {
                padding-right: 120px;
            }
    
            li.link-3 {
                padding-right: 150px;
            }
    
            li.link-4 {
                padding-right: 190px;
            }
    
            li.link-5 {
                padding-right: 240px;
            }
    
        </style>
    </head>
    
    <body>
    
        <ul>
            <li class="link-1"><a href="./">Link</a></li>
            <li class="link-2"><a href="./">Link</a></li>
            <li class="link-3"><a href="./">Link</a></li>
            <li class="link-4"><a href="./">Link</a></li>
            <li class="link-5"><a href="./">Link</a></li>
        </ul>
    
    
    </body>
    
    [/html]

    Glaube schon, ja.

    Ah ok. Also rechtsbündig auslegen, dann mit padding-right versehen und das hover letter-spacing wird dann durch das align-right nach links hin ausgeübt …

    Vielen Dank