Có cách nào để thêm một đường ngang sau mỗi tiêu đề mà không cần sử dụng <hr> không? Tôi chỉ muốn thêm một cái gì đó bên trong <style> </style> hỏi ngày 14 tháng 1 năm 2020 lúc 2:27Jan 14, 2020 at 2:27 Cách chính xác để thêm một dòng sau khi tiêu đề là sử dụng CSS không phải là phần tử <hr/>. Lưu ý rằng các phần tử H là các phần tử cấp khối (trừ khi bạn tạo kiểu cho chúng được nội tuyến hoặc đang sử dụng hiển thị: Flex trên thùng chứa cha mẹ, do đó, đáy biên giới sẽ mở rộng toàn bộ chiều rộng của thecontainer. Điều này có thể được áp dụng riêng cho bất kỳ phần tử H nào - hoặc cho tất cả chúng bằng cách kết hợp tất cả các phần tử H thành một khai báo kiểu duy nhất. h2 {
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: solid 1px #e1e1e1;
}
<h2>This is a heading</h2>
Đã trả lời ngày 14 tháng 1 năm 2020 lúc 2:29Jan 14, 2020 at 2:29 Gavgrifgavgrifgavgrif 14.6K2 Huy hiệu vàng23 Huy hiệu bạc27 Huy hiệu đồng2 gold badges23 silver badges27 bronze
badges Bạn cũng có thể áp dụng: h2::after{
display: block;
content: '';
margin-top: 10px;
border-bottom: 1px solid #000;
}
Đã trả lời ngày 14 tháng 1 năm 2020 lúc 8:55Jan 14, 2020 at 8:55
Bạn muốn cung cấp cho các tiêu đề của các trang của bạn một phong cách nguyên bản và hấp dẫn, nhưng bạn không biết làm thế nào? Đọc đoạn này và bạn sẽ học thêm các dòng trước và sau các tiêu đề. Bạn có thể có được một hiệu ứng như vậy bằng cách sử dụng :: Trước và :: sau các yếu tố giả. Hãy cùng nhau làm điều đó từng bước một. - Đặt văn bản tiêu đề của bạn trong phần tử.
- Đặt phông chữ và kích thước phông chữ của tiêu đề với các thuộc tính của phông chữ và phông chữ.
- Căn chỉnh tiêu đề đến trung tâm với giá trị "trung tâm" của thuộc tính văn bản.
- Tạo không gian xung quanh tiêu đề với thuộc tính lề.
- Chúng tôi sẽ thêm một dòng trước khi tiêu đề thông qua :: trước khi giả yếu tố 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 :: Trước và :: sau các yếu 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ể cung cấp cho dòng một màu bằng cách sử dụng thuộc tính nền.
- Xác định vị trí trên và bên trái của dòng với các thuộc tính trên và bên trái.
- Để tạo kiểu :: Sau khi giả, 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.
h2 {
font-family: sans-serif;
margin: 100px auto;
color: #228B22;
text-align: center;
font-size: 30px;
max-width: 600px;
position: relative;
}
h2:before {
content: "";
display: block;
width: 120px;
height: 2px;
background: #000;
left: 0;
top: 50%;
position: absolute;
}
h2:after {
content: "";
display: block;
width: 120px;
height: 2px;
background: #000;
right: 0;
top: 50%;
position: absolute;
}
Bây giờ, hãy để Lừa đặt toàn bộ mã với nhau và thử một số ví dụ. Ví dụ về việc thêm các dòng trước và sau văn bản tiêu đề:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
font-family: sans-serif;
margin: 100px auto;
color: #228B22;
text-align: center;
font-size: 30px;
max-width: 600px;
position: relative;
}
h2:before {
content: "";
display: block;
width: 130px;
height: 5px;
background: #191970;
left: 0;
top: 50%;
position: absolute;
}
h2:after {
content: "";
display: block;
width: 130px;
height: 5px;
background: #191970;
right: 0;
top: 50%;
position: absolute;
}
</style>
</head>
<body>
<h2>Welcome to W3Docs!</h2>
</body>
</html>
Kết quảChào mừng bạn đến với W3DOCS! Nếu bạn muốn các dòng gần hơn với văn bản, bạn cần thay đổi vị trí bên trái và bên phải. Ví dụ về việc thêm các dòng ngang trước và sau văn bản:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
font-family: sans-serif;
margin: 100px auto;
text-align: center;
color: black;
font-size: 40px;
max-width: 600px;
position: relative;
}
h2:before {
content: "";
display: block;
width: 150px;
height: 5px;
background: #CD5C5C;
left: 85px;
top: 50%;
position: absolute;
}
h2:after {
content: "";
display: block;
width: 150px;
height: 5px;
background: #CD5C5C;
right: 85px;
top: 50%;
position: absolute;
}
</style>
</head>
<body>
<h2>Hello!</h2>
</body>
</html>
| 
