Tạo Và Định Dạng Đường Ngang Trong HTML

Thẻ <hr> (Horizontal Rule) tạo đường phân cách chủ đề. Là phần tử block, hỗ trợ rộng rãi, có thể định dạng bằng CSS.

Quy ước: dùng thẻ không đóng <hr> (hoặc tự đóng <hr /> đều được).

Ví Dụng CSS Tùy Chỉnh

Mặc định là đường nét đơn. Có thể tạo đường đôi, chấm, thêm icon...

<style>
  hr {
    border: none;
    border-top: 5px double black;
    height: 5px;
    text-align: center;
  }
  hr::after {
    content: '😀😀😀😀';
    position: relative;
    top: -18px;
    background: white;
    padding: 0 4px;
  }
  #dashed-hr {
    border-top: 3px dotted black;
  }
  #dashed-hr::after { content: ""; }
</style>

<hr> <!-- đường đôi có icon -->
<hr id="dashed-hr"> <!-- đường chấm -->

Sử dụng pseudo-element ::after để chèn nội dung trang trí (icon, text) giữa đường.

Kết Luận

<hr> đơn giản nhưng mạnh mẽ để phân chia nội dung. Kết hợp CSS tạo đường phân cách độc đáo, tăng thẩm mỹ trang web.