Heim > Artikel > Web-Frontend > So fügen Sie in CSS horizontale Linien auf beiden Seiten des Textes hinzu
So fügen Sie in CSS horizontale Linien auf beiden Seiten des Textes hinzu
- 青灯夜游Original
- 2021-01-05 17:06:1811294Durchsuche
Sie können die Attribute :before, :after und content in CSS verwenden, um horizontale Linien auf beiden Seiten des Textes hinzuzufügen; die Syntax lautet „E:before,E:after{content:““;flex:1 1;border -bottom:2px solid; }", E ist ein Element, das Text enthält.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.
Empfohlenes Tutorial: CSS-Video-Tutorial
So fügen Sie horizontale Linien auf beiden Seiten des Textes in CSS hinzu
In CSS können Sie die :before-, :after-Selektoren und Inhaltsattribute verwenden, um dies zu erreichen.
:Der Before-Selektor fügt Inhalte vor dem ausgewählten Element ein, und der :After-Selektor fügt Inhalte nach dem ausgewählten Element ein. Das Attribut
content wird mit den Pseudoelementen :before und :after verwendet, um generierten Inhalt einzufügen.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h4 {
display: flex;
flex-direction: row;
}
h4:before,
h4:after {
content: "";
flex: 1 1;
border-bottom: 2px solid #000;
margin: auto;
}
img {
height: 100px;
width: 100px;
border-radius: 50%;
}
</style>
</head>
<body>
<h4>PHP中文网</h4>
</body>
</html>Rendering:
Weitere Programmierkenntnisse finden Sie unter: Programmierunterricht! !
Das obige ist der detaillierte Inhalt vonSo fügen Sie in CSS horizontale Linien auf beiden Seiten des Textes hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!