Cách tạo: Đường phân cách văn bản

Cách tạo đường phân cách văn bản tương ứng

Bước 1 - Thêm HTML:

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

Bước 2 - Thêm CSS:

.divider {
  font-size: 30px;
  display: flex;
  align-items: center;
}
.divider::before, .divider::after {
  flex: 1;
  content: '';
  padding: 3px;
  background-color: red;
  margin: 5px;
}

Thử ngay

Giải thích ví dụ:

Bài học này sẽ hướng dẫn bạn cách sử dụng CSS để tạo một đường phân cách văn bản. Đặc biệt, nó sử dụng sự kết hợp của HTML và CSS để đạt được hiệu ứng này.

Trước hết, bạn cần thêm một phần tử div có tên lớp "divider" trong HTML và đặt văn bản bạn muốn hiển thị (trong ví dụ này, văn bản là "Lorem Ipsum") trong đó.

Sau đó, trong CSS, bạn đã thiết lập .divider Cài đặt một số phong cách cho lớp. Bạn đã thiết lập kích thước字号 là 30 điểm, sử dụng bố cục flex, và thiết lập align-items: center; để làm cho văn bản thẳng đứng居 giữa trong đường phân cách.

Tiếp theo, bạn đã sử dụng phần tử ảo ::before và ::after để thêm trang trí hai bên cho đường phân cách. Cả hai phần tử ảo này đều được thiết lập flex: 1 để chúng chiếm .divider Tất cả không gian bên trong phần tử trừ văn bản. Bạn cũng đã thiết lập content: '' Để đảm bảo hai phần tử ảo này là trống, không chứa bất kỳ nội dung nào.

Sau đó, thiết lập khoảng cách nội bộ, màu nền và khoảng cách bên ngoài để định nghĩa phong cách của đường phân cách. Trong ví dụ này, màu của đường phân cách là đỏ và có một số khoảng cách nội bộ và bên ngoài.