CSS Hover effekt

  • Hallo,

    ich habe einen Link, der im Normalzustand so aussieht:


    --- Read more


    und beim drüber fahren so:


    --------------- Read more


    Das heißt, der Text wandert durch die Verlängerung der dünnen Linie nach rechts.


    Ich suche nach einer Möglichkeit, die es erlaubt, dass der Text an "Ort und Stelle" bleibt und die dünne Linie sich nach links ausweitet!?

    Hier der bisherige Code:

  • Versuche es mal ::after!

    Und bitte... ::after und ::before sind 'Pseudoelemente' und werden im CSS mit einem doppelten Doppelpunkt (::) ausgezeichnet.

    Im Gegensatz zu Pseusoklassen (zB :hover), die haben den einfachen Doppelpunkt (:)

  • Bei after wird die dünne Linie rechts neben dem Text angezeigt. Das ist aber nicht das Ziel. Die dünne Linie soll links vom Text bleiben, nur halt nach links "ausfahren".

Jetzt mitmachen!

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