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
Khi thiết lập nhiều thuộc tính line-decoration cùng một lúc, có thể thuận tiện hơn khi sử dụng thuộc tính tốc ký text-decoration
để thay thế
/* 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;
Thuộc tính text-decoration-line
được chỉ định là none
hoặc một hoặc nhiều giá trị được phân tách bằng dấu cách từ danh sách bên dưới
none
Không tạo trang trí văn bản
underline
Mỗi dòng văn bản có một dòng trang trí bên dưới nó
text-decoration-line =0
none |
[ underline || overline || line-through || blink ]
Mỗi dòng văn bản có một dòng trang trí phía trên nó
text-decoration-line =1
none |
[ underline || overline || line-through || blink ]
Mỗi dòng văn bản có một dòng trang trí đi qua giữa của nó
text-decoration-line =2 Không dùng nữa
none |
[ underline || overline || line-through || blink ]
Văn bản nhấp nháy [luân phiên giữa hiển thị và ẩn]. Tác nhân người dùng phù hợp có thể không nhấp nháy văn bản. Giá trị này không được dùng để ủng hộ hoạt ảnh CSS
Giá trị ban đầu ______ 12 ______ Áp dụng cho tất cả các phần tử. Nó cũng áp dụng cho
text-decoration-line =4 và
none |
[ underline || overline || line-through || blink ]
text-decoration-line =5. Kế thừa giá trị không được tính toán như đã chỉ định Loại hoạt hình rời rạc
none |
[ underline || overline || line-through || blink ]