Titel mit unterem Rand kleiner als Breite

Sie könnten dafür ein Pseudo-Element verwenden. (Beispiel)

Positioniere einfach ein Pseudo-Element relativ zum Elternelement. Positioniere es 100% von top und verwende eine Kombination aus left:0; right:0 und margin von auto für die horizontale Zentrierung. Ändern Sie die Höhe / Breite des Elements entsprechend und ändern Sie margin-top für den Abstand.

Andere Vorgehensweise:

Box Schatten mit einem negativen Spreizradius:

Hinweis: Sie müssen sicherstellen, dass - spread-radius x2 < height andernfalls der Box-Schatten 0 Höhe hat und verschwindet.

Sie können dies auch mit linear-gradient tun. Bei dieser Methode wird ein kleines Hintergrundbild mit Farbverläufen erstellt, so dass es für die ersten 25% und die letzten 25% transparent ist, während die restlichen 50% die Farbe haben (so dass es aussieht wie 50% des tatsächlichen h2 -Text). . Dieser Hintergrund wird dann am unteren Rand des Elements positioniert, damit er wie ein unterer Rand aussieht. Die Größe der Grenze kann durch Ändern der Hintergrundgröße variiert werden.

Der Effekt würde auch dann bestehen bleiben, wenn die Textmenge in h2 variiert. Der Hauptnachteil ist jedoch die relativ schlechte Browser-Unterstützung für Gradienten im Vergleich zum Pseudo-Element oder dem Box-Shadow-Ansatz.

^{Hinweis: Die Verwendung des Skripts in der Antwort dient nur dazu, Browserpräfixe zu vermeiden :)}

Sie könnten eine Art "falschen" Rahmen verwenden, indem Sie einfach ein div um das Element legen und nach dem Titel einen Rahmen div machen.

JSFiddle

HTML

CSS

}

Fast alle Lösungen, die ich in der Vergangenheit für diesen Effekt gesehen habe, haben sich auf die Positionierung verlassen - aber mit display: flex können wir das ziemlich einfach erreichen. Das Folgende ist ein Beispiel für eine Überschrift, aber es kann für jedes Element verwendet werden. Bedenke nur, dass die Art von flex-direction: column alle untergeordneten Elemente stapelt.

HTML

CSS

Beachten Sie, dass Sie je nach Browserunterstützung Vendor-Präfixe für flex hinzufügen müssen (meist frühere Versionen von IE, natürlich) Ссылка