CSS Text Hintergrundfarbe mit begrenzter Breite

  • Hallo Freunde,


    kann mir jemand helfen eine Hintergrundfarbe für eine Überschrift zu erstellen die nicht die ganze Section, sondern nur das Wort umschließt?


    Der einfache Befehl "background-color" bezieht immer die ganze Section mit ein, ich suche allerdings nach einer Möglichkeit nur ein Wort mit einem Hintergrund zu schmücken (ähnlich wie bei der Textmakrierung mit der Maus) . Das sollte doch mit einem Pseudo Element möglich sein oder? Wäre toll wenn dieser Hintergrund dann nicht die volle Höhe hat, sondern nur 50% der eigentlichen Höhe.


    Bin sehr dankbar für Lösungsvorschläge! :)

  • Zitat

    Wäre toll wenn dieser Hintergrund dann nicht die volle Höhe hat, sondern nur 50% der eigentlichen Höhe.

    Das kann ich ohne Beispiel nicht nachvollziehen. 50% von was?


    Pseudoelemente helfen für dein Problem überhaupt nicht weiter.


    Wenn eine Überschrift eine Hintergrundfarbe erhalten soll, kannst du die direkt der Überschrift zuweisen. Wenn nur die Worte der Überschrift eine Hintergrundfarbe erhalten sollen würde ich ein span-Element verwenden.


    Wenn ein einzelnes Wort eine Hintergrundfarbe erhalten soll, kannst du es mit einem geeigneten Element, zum Beispiel dem span-Element, umgeben und dem eine Hintergrundfarbe zuweisen.


    Ich habe mal eine Beispielseite erstellt:


    https://www.w3schools.com/code…asp?filename=GOHGBRDGXFFF


    Dort auf den grünen Run-Button klicken.


    Damit die Hintergrundfarbe nicht zu nah an den Worten klebt habe ich jeweils ein kleines padding hinzugefügt. Bei der Überschrift an allen Seiten, bei den Worten im Text nur links und rechts.

  • Hallo Murphy,


    herzlichen Dank für die hilfreiche Antwort!! Das ist genau wonach ich gesucht habe :)


    Ich meinte eigentlich kein Pseudoelement, sondern ein ::before/::after element, doch deine Lösung ist viel einfacher und passt perfekt.


    Danke danke danke !!!

Jetzt mitmachen!

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