如何创建：文本分隔线

学习如何使用 CSS 创建文本分隔线。

Lorem Ipsum
OR
AND

亲自试一试

如何创建响应式文本分隔线

第一步 - 添加 HTML：

<div class="divider">Lorem Ipsum</div>

第二步 - 添加 CSS：

.divider {
  font-size: 30px;
  display: flex;
  align-items: center;
}

.divider::before, .divider::after {
  flex: 1;
  content: '';
  padding: 3px;
  background-color: red;
  margin: 5px;
}

亲自试一试

例子解释：

本例教您如何使用 CSS 创建一个文本分隔线。具体来说，它使用了 HTML 和 CSS 的组合来实现这一效果。

首先，你需要在 HTML 中添加一个带有类名 "divider" 的 <div> 元素，并在其中放置你想要显示的文本（在这个例子中，文本是 "Lorem Ipsum"）。

然后，在 CSS 中，你为 .divider 类设置了一些样式。你设置了字体大小为 30 像素，使用了 flex 布局，并设置了 align-items: center; 来使文本在分隔线中垂直居中。

接着，你使用了伪元素 ::before 和 ::after 来为分隔线添加两侧的装饰。这两个伪元素都设置了 flex: 1 来使它们占据 .divider 元素中除去文本之外的所有空间。你还设置了 content: '' 来确保这两个伪元素是空的，不会包含任何内容。

然后，设置内边距、背景颜色和外边距来定义分隔线的样式。在这个例子中，分隔线的颜色是红色，并且有一些内边距和外边距。