Titel mit Zeilen, die den verbleibenden Platz auf beiden Seiten ausfüllen

7

Ich wurde gebeten, diesen Titel rein mit CSS zu erstellen, ist das überhaupt möglich?

Der Hintergrund des Textes muss transparent bleiben, der h2 muss die Breite jedes Containers umfassen und die linken und rechten Ränder müssen automatisch den verbleibenden Platz ausfüllen.

%Vor%

Die linke Seite ist einfach, aber ich bin auf der rechten Seite stecken.

Ссылка

Ich kann nicht herausfinden, wie man nur die rechte Linie füllt, um den verbleibenden Platz auf der rechten Seite des Containers zu füllen.

    
Shannon Hochkins 02.06.2015, 08:53
quelle

5 Antworten

20

Sie können margin-right:-100%; und vertical-align:middle; für das Pseudoelement :after verwenden. (Basierend auf dieser Antwort: Zeilentrennzeichen unter Text und transparentem Hintergrund ):

%Vor% %Vor%

Beachten Sie, dass ich auch Ihr CSS vereinfacht habe.

    
web-tiki 02.06.2015, 09:00
quelle
2

Wenn Sie nicht zu sehr auf absolute Positionierung achten, können Sie dies tun

%Vor%

muss optimiert werden, aber in jsfiddle bekommen Sie das, was Sie brauchen

    
atmd 02.06.2015 08:57
quelle
1

Hier ist die Lösung mit display: table;
und display: table-cell;

Die Zeilen auf der Seite werden nach dem Inhalt der Kopfzeile vergrößert und verkleinert.

%Vor% %Vor%
    
Persijn 02.06.2015 14:53
quelle
0
%Vor%

Das HTML ist: -      

Sie müssen auch ein Hintergrundbild hinzufügen oder CSS3-Gradienten verwenden.     
sandeep_1994 02.06.2015 09:09
quelle
0

Das ist was ich benutze:)

Ссылка

%Vor% %Vor%
    
Nefro 02.06.2015 09:16
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Holen Sie sich das Zentrum eines jeden UIView in Swift