Heim > Web-Frontend > CSS-Tutorial > 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

青灯夜游
Freigeben: 2023-01-04 09:38:46
Original
11333 Leute haben es durchsucht

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.

So fügen Sie in CSS horizontale Linien auf beiden Seiten des Textes hinzu

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>
Nach dem Login kopieren

Rendering:

So fügen Sie in CSS horizontale Linien auf beiden Seiten des Textes hinzu

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!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage