Hướng dẫn css add horizontal line after element - css thêm dòng ngang sau phần tử

Tôi biết đây là một câu hỏi cũ hơn, nhưng xem xét không có bất kỳ câu trả lời chỉ chính xác nào của CSS (mặc dù Bobby đã gần), tôi sẽ thêm hai xu của mình.

Bạn không thể sử dụng CSS để thêm thẻ HTML vào một trang. Tuy nhiên, có một giải pháp chỉ dành cho CSS để đạt được hiệu ứng thị giác tương tự.

Bạn có thể sử dụng phần tử giả ::after để làm điều này. Điều này tạo ra một phần tử sau phần tử được chỉ định, trong trường hợp này là article.

Sử dụng

<h2 class="hr-lines">PEACE</h2>

0 cho một phần tử trống, sau đó chúng tôi kiểu dáng phù hợp với toàn bộ chiều rộng của màn hình (

<h2 class="hr-lines">PEACE</h2>

1), với

<h2 class="hr-lines">PEACE</h2>

2 của sự lựa chọn của chúng tôi (trong trường hợp này chỉ

<h2 class="hr-lines">PEACE</h2>

3) và chúng tôi cho nó hàng. Sử dụng

<h2 class="hr-lines">PEACE</h2>

5 và

<h2 class="hr-lines">PEACE</h2>

6 đảm bảo đường dây sẽ luôn dính vào phía bên trái của màn hình và vì nó rộng như màn hình, nó sẽ luôn trải rộng toàn bộ chiều rộng.

Nếu bạn không muốn dòng kéo dài toàn bộ màn hình, bạn có thể sử dụng

<h2 class="hr-lines">PEACE</h2>

7 thay vì

<h2 class="hr-lines">PEACE</h2>

8 để làm cho nó kéo dài bất kỳ yếu tố nào bạn đặt bên trong. (Đó sẽ là cha mẹ của yếu tố article trong ví dụ này).

article {
    position: relative;
}

article::after {
    content: '';
    position: absolute;
    width: 100vw;
    height: 1px;
    left: 0;
    display: block;
    clear: both;
    background-color: black;
}

Đăng ký nhận bản tin của tôi và không bao giờ bỏ lỡ các bài viết sắp tới của tôi

Bài viết này sẽ hướng dẫn bạn cách thêm một đường ngang ở bên phải và bên trái của một văn bản như hình dưới đây:

nếu bận){

Nhảy để hoàn thành mã!

} khác {

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

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

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

0 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;
}

1

<h2 class="hr-lines">PEACE</h2>

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

Chúng tôi 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;
}

2 để thêm một dòng vào phía 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ừ mã trên, chúng tôi đang tạo một phần tử mới có chiều cao

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

3 và chiều rộng

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

4 trước phần tử

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

1 bằng cách sử dụng thuộc tính Nội dung, sau đó cho nó một vị trí tuyệt đối để di chuyển nó xung quanh, chúng tôi đặt phần trên Làm cho nó phù hợp với văn bản ở giữa.

3. Đặt .hr-lines:before{ content:" "; display: block; height: 2px; width: 130px; position: absolute; top: 50%; left: 0; background: red; } 1 thành tương đối

Để các yếu 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 người thân, đ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;
}

2 và

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

9 có liên quan đến cha mẹ (văn bản).

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

.hr-lines{
  position: relative;
}

Kết quả đầu ra

Chúng ta có thể sửa lỗi này bằng cách đặt

.hr-lines{
  position: relative;
}

0 và thêm

.hr-lines{
  position: relative;
}

1 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;
}

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

<h2 class="hr-lines">PEACE</h2>

6.

4. Thêm đúng dòng

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;
}

9 để thêm đúng dòng.

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

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

Chúng tôi đang đặt

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

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

.hr-lines{
  position: relative;
}

6.

Đầu ra cuối cùng:

}

---

Mã hoàn chỉnh

.hr-lines{
  position: relative;
}

7

<h2 class="hr-lines"> PEACE </h2>

<section>
  <div>
    <p>I wish for peace in Russia & Ukraine</p>
  </div>
<section>

.hr-lines{
  position: relative;
}

8

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

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

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

p{
  text-transform: uppercase;
  color: red;
}

section{
  display: flex;
  justify-content: center;
  align-items:center;
  gap: 1rem;

}

div{
  width: 500px;
    border: 1px solid #ccc;
  padding: 10px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.4;
}

Gói lên

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

---

Wow, thật là một hành trình, tôi rất vui vì bạn đã làm cho đế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 @Unclebigbay143
• 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 hỗ trợ blog của tôi, bạn cũng có thể mua cho tôi một ly cà phê dưới đây, blog của tôi sống trên cà phê.

Làm thế nào để bạn đặt một đường ngang sau văn bản?

Làm thế nào để bạn đặt một dòng sau văn bản trong CSS?

Làm cách nào để thêm một đường ngang trong CSS?

Làm thế nào để bạn đặt một dòng trước và sau khi hướng dẫn văn bản?