HTML & CSS - Text nach "außen" verschieben

Moin,
ich habe so ein kleines Problem woran ich gerade extrem verzweifle :/

Es geht um folgenden Code/Inhalt: [Only registered and activated users can see links. Click Here To Register...]

Ich möchte am Ende die graue Box, die auf dem Menü ist drunter haben OHNE, dass der Hintergrund kaputt geht und sich trotzdem mit der größe des Textes automatisch anpasst.
Desweiteren möchte ich den die freie Fläche der grauen Box über dem Text und unter dem Text verschwinden lassen. Heißt, der Text muss irgend wie über das eigentliche Object hinnausragen. Leider geht hierbei ebenfalls der große Hintergrund hinter der grauen Box kaputt :(

Weiß jemand eine Lösung OHNE Javascript und nur mit reinem HTML & CSS? :)

MfG,
Mr.Tr33

Einfach mit position:absolute; positionieren und dann jeweils mit margin verschieben, wäre eine Möglichkeit.

Ehm ja danke aber ich würde nicht um Hilfe fragen, wenn ich nicht schon fast alles versucht hätte :/

[Only registered and activated users can see links. Click Here To Register...]

Kreis 1: Der Hintergrund passt sich meinem Text nicht automatisch an = doof
Kresi 2: Hier müsste ich jeden einzelnen Pixel zurecht schieben was nicht gerade schön ist :/

rechts ? oder mittig?

[Only registered and activated users can see links. Click Here To Register...]

Nee, dann würde der Hintergrund ja schwachsinnig aufgeteilt sein.
Dazu überlappt sichd er Schaten
Und bei dir ist der Text hoch genug, nur der untere Teil eben zu tief.