Dòng phía sau văn bản CSS

Nếu điều này xuất hiện, bạn sẽ thấy nó tương tự như của Ryan ngoại trừ màu nền hoặc mẫu nền hiển thị qua tiêu đề. Nói cách khác, dòng KHÔNG chạy phía sau văn bản tiêu đề

Bạn muốn tạo cho tiêu đề các trang của mình một phong cách độc đáo và hấp dẫn, nhưng bạn không biết làm thế nào? . Bạn có thể có được hiệu ứng như vậy bằng cách sử dụng. trước và. sau các phần tử giả. Hãy cùng nhau thực hiện từng bước

• Đặt văn bản tiêu đề của bạn trong phần tử

• Đặt phông chữ và cỡ chữ của tiêu đề với các thuộc tính phông chữ và cỡ chữ
• Căn chỉnh tiêu đề vào giữa với giá trị "trung tâm" của thuộc tính căn chỉnh văn bản
• Tạo khoảng trống xung quanh tiêu đề với thuộc tính lề
• Chúng tôi sẽ thêm một dòng trước tiêu đề thông qua. trước phần tử giả và sau đó, chỉ định màu của văn bản
• Đặt thuộc tính nội dung luôn được sử dụng với thuộc tính. trước và. sau các phần tử giả để tạo nội dung bên trong một phần tử
• Đặt chiều cao và chiều rộng của dòng theo văn bản của bạn
• Bạn có thể tô màu cho đường bằng thuộc tính nền
• Xác định vị trí trên cùng và bên trái của dòng với các thuộc tính trên cùng và bên trái
• Để tạo kiểu cho. sau phần tử giả, hãy sử dụng các thuộc tính tương tự ở trên. Chỉ thay vì thuộc tính bên trái, bạn cần đặt thuộc tính bên phải

h1 {
  font-family: sans-serif;
  margin: 100px auto;
  color: #228B22;
  text-align: center;
  font-size: 30px;
  max-width: 600px;
  position: relative;
}

h1:before {
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  background: #000;
  left: 0;
  top: 50%;
  position: absolute;
}

h1:after {
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  background: #000;
  right: 0;
  top: 50%;
  position: absolute;
}

Bây giờ, hãy đặt toàn bộ mã lại với nhau và thử một số ví dụ

Ví dụ về thêm dòng trước và sau văn bản tiêu đề

  
    Title of the document
    
  
  
    Welcome to W3Docs!
  

Kết quả

Nếu bạn muốn các dòng gần văn bản hơn, bạn cần thay đổi vị trí bên trái và bên phải

Ví dụ thêm đường kẻ ngang trước và sau văn bản

  
    Title of the document
    
  
  
    Hello!
  

Thuộc tính CSS text-decoration-line đặt kiểu trang trí được sử dụng trên văn bản trong một phần tử, chẳng hạn như gạch chân hoặc gạch chân

/* Single keyword */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;

/* Multiple keywords */
text-decoration-line: underline overline;               /* Two decoration lines */
text-decoration-line: overline underline line-through;  /* Multiple decoration lines */

/* Global values */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: revert;
text-decoration-line: revert-layer;
text-decoration-line: unset;

text-decoration-line = 
  none                                                |
  [ underline || overline || line-through || blink ]  

text-decoration-line = 
  none                                                |
  [ underline || overline || line-through || blink ]  

text-decoration-line = 
  none                                                |
  [ underline || overline || line-through || blink ]  

text-decoration-line = 
  none                                                |
  [ underline || overline || line-through || blink ]  

text-decoration-line = 
  none                                                |
  [ underline || overline || line-through || blink ]