如何創建：文本分隔線

學習如何使用 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: '' 來確保這兩個偽元素是空的，不會包含任何內容。

然后，設置內邊距、背景顏色和外邊距來定義分隔線的樣式。在這個例子中，分隔線的顏色是紅色，并且有一些內邊距和外邊距。