Làm cách nào để thêm dòng trong HTML?

Bài viết này sẽ hướng dẫn các bạn cách thêm đường kẻ ngang vào bên phải và bên trái văn bản như hình bên dưới

nếu bận]{

} khác {

1. Tạo thẻ văn bản HTML

Trong tệp HTML của bạn, hãy tạo một thẻ

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

9 và đặt cho nó một tên lớp là

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

0

PEACE

2. Thêm dòng bên trái

Chúng ta sẽ sử dụng phần tử giả CSS

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

1 để thêm một dòng vào bên trái của văn bản. Áp dụng mã bên dưới vào tệp CSS của bạn

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

Từ đoạn mã trên, chúng tôi đang tạo một phần tử mới có chiều cao là

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

0 và chiều rộng là

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

1 trước phần tử

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

0 bằng cách sử dụng thuộc tính nội dung, sau đó đặt cho nó một vị trí tuyệt đối để di chuyển nó xung quanh, chúng tôi đặt phần trên cùng là

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

3 thành

3. Đặt

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

0 thành tương đối

Để các phần tử giả được áp dụng cho phần tử đích, chúng ta phải đặt vị trí của phần tử thành tương đối, điều này sẽ làm cho tất cả chuyển động của

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

1 và

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

6 có liên quan đến phần tử gốc [văn bản]

Thêm các dòng sau vào tệp CSS của bạn

.hr-lines{
  position: relative;
}

kết quả đầu ra

Chúng tôi có thể khắc phục điều này bằng cách đặt

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

7 và thêm

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

8 vào phần tử

.hr-lines{
  position: relative;
  /*  new lines  */
  max-width: 500px;
  margin: 100px auto;
  text-align: center;
}

Chúng tôi đang đặt

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

1 ở bên trái của văn bản bằng cách đặt

.hr-lines{
  position: relative;
}

0

4. Thêm dòng bên phải

Chúng tôi sẽ sử dụng phần tử giả

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

6 để thêm dòng bên phải

Thêm các dòng mã sau vào tệp CSS của bạn để thêm đúng dòng vào văn bản

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

2

Chúng tôi đang đặt

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

6 ở bên phải của văn bản bằng cách đặt

.hr-lines{
  position: relative;
}

3

Kết quả cuối cùng

}

Mã hoàn chỉnh

.hr-lines{
  position: relative;
}

4

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

6

.hr-lines{
  position: relative;
}

5

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

8

kết thúc

Tôi hy vọng rằng bài viết này sẽ hỗ trợ bạn trong việc tạo văn bản có các dòng ngang phải và trái vào một thời điểm nào đó trong tương lai

Chà, thật là một hành trình, tôi rất vui vì bạn đã đi đến cuối bài viết này, nếu bạn thích và học được điều gì đó mới từ bài viết này, tôi sẽ muốn kết nối với bạn

Hãy kết nối trên

• Twitter @chúbigbay143
• LinkedIn @unclebigbay

Hẹn gặp lại các bạn trong bài viết tiếp theo. Tạm biệt 🙋‍♂️

Nếu bạn thấy nội dung của tôi hữu ích và muốn ủng hộ blog của tôi, bạn cũng có thể mua cho tôi một ly cà phê bên dưới, blog của tôi sống nhờ cà phê 🙏

Làm cách nào để vẽ một đường thẳng trong HTML?

Có thẻ dòng trong HTML không?