html - 如何制作分隔线？

Question

这个问题在这里已经有了答案:





heading with horizontal line on either side [duplicate]

(3 个回答)


3年前关闭。




我想弄清楚如何制作两个由文本分隔的分隔线。例如看图片



我可以做一行，



但我不知道如何制作两个或内联并在中间有文字。

Answer 1

如果背景只是纯色，那么您可以创建一个容器宽度 width 100%; height: 1px容器，把文字放在中间，用更大的z-index和相同的 background color作为页面背景。

这是一个示例(使用伪元素创建行)

body {
	background: #fafafa;
	font-size: 15px;
	font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

.section-header {
	position: relative;
	text-align: center;
}

.section-header:before {
	content: '';
	z-index: 1;

	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);

	width: 100%;
	height: 1px;

	background: #dddddd;
}

	.section-header__title {
		position: relative;
		z-index: 2;

		background: #fafafa;
		padding: 5px 20px;

		font-weight: 700;
		font-size: 20px;
		text-transform: uppercase;

		display: inline-block;

		color: #174750;
	}

<div class="section-header">
	<span class="section-header__title">Day 1</span>
</div>