css: wie mache ich so einen Unterstrich wie da?
https://themeix.com/livedemo?theme=appszone
zur class head-title finde ich nur diese Einträge aber das erstellt das nicht... : https://hastebin.com/hoyarafexo.css
wie geht dieser Strich genau ? kann man das auslesen ?
4 Antworten
Ja, das lässt sich auslesen. Wenn du das h2-Element im Inspektor einmal aufklappst, siehst du die Pseudoelemente :before und :after. Diese sind für die Umsetzung dieses Trenners verantwortlich.
Hier ein Fiddle dazu: https://jsfiddle.net/q1jbd23v/
kann man das auslesen ?
Ja, dazu kannst du die Entwicklertools verwenden. Dadurch findest du das:
.head-title:before {
position: absolute;
content: "";
left: 50%;
top: 58px;
width: 20px;
height: 6px;
background: #3f8ee8;
margin: 0 auto;
transform: translateX(-53%);
}
.head-title:after {
position: absolute;
content: "";
left: 50%;
top: 60px;
width: 100px;
height: 2px;
background: #3f8ee8;
margin: 0 auto;
transform: translateX(-53%);
}
Fiddle: https://jsfiddle.net/25q403dc/
<!doctype html>
<title>border-bottom</title>
<style>
h1 {
border-bottom:2px solid lightblue;
display:inline-block;
position:relative
}
h1:after {
border-bottom:6px solid lightblue;
position:absolute;
left:35%;
bottom:-4px;
width:20%;
content:" "
}
</style>
<h1>hello world</h1>
Alex
::before und ::after sind die Pseudoelemente. Das ::before erzeugt eine dünne Linie und das ::after erzeugt eine dicke Linie.
Darüber hinaus verwendet der Autor die absolute Positionierung, um Pseudoelemente unter der Überschrift und übereinander zu platzieren.
