Round Caps in CSS unterstreichen
5 Antworten
EDIT: Ich habe nicht verstanden, was hpique wated, aber das sollte funktionieren:
HTML:
%Vor%CSS:
%Vor% Im Grunde lege ich den Text auf ein Div auf und der Box-Schatten wird die gleiche Größe haben wie das Set height und width für dieses div, spiele einfach mit dem height / width und Sie sollten bekommen, was Sie wollen ...
Screenshot von der Demo:
Nein. Wenn Sie dies nur mit HTML + CSS tun möchten, benötigen Sie ein sekundäres Element, das unter dem Text platziert wird, und dann Krümmung und Hintergrundfarbe darauf anwenden. Alternativ, und meiner Meinung nach, kann man ein Bild verwenden.
Wie die Antwort von youtag verwendet meine Lösung Pseudoelemente - aber meine Unterstreichung führt nur die Länge des Textes aus und kann auf mehrere Zeilen umbrechen (mit einer Unterstreichung, die unter jeder Textzeile verläuft).
Grundsätzlich beende ich die Enden der Elementbegrenzung manuell mit Pseudoelementkreisen vor und nach dem Element:
%Vor% Ich verwende left und right für die Pseudo-Elemente, damit die Enden nicht zu weit über den Text hinausragen.
Siehe meinen Codepen .
Sie können das tun, indem Sie ein div unterhalb des Textes verwenden und seinen Rand-Radius auf 2000px setzen. Ich denke, das wird einfacher sein
HTML:
%Vor%CSS:
%Vor%JQUERY SNIPPET:
%Vor%