วิธีการตกแต่งแท็ก hr ด้วย CSS

บางครั้งเราอยากให้แท็ก <hr> หน้าตาไม่เหมือนกับแบบทั่ว ๆ ไป เช่น ใส่สี เปลี่ยนความหนา

<hr> เกิดขึ้นมาจาก border เพราะฉะนั้นการตกแต่ง <hr> ทำได้ง่าย ๆ โดยกำหนด border: 0 เพื่อเอา style จากบราวเซอร์ออกก่อน แล้วสามารถตกแต่งได้เหมือน element ทั่ว ๆ ไปเลย

hr {
    height: 1px;
    color: #ed1d61;
    background: #ed1d61;
    font-size: 0;
    border: 0;
}

สังเกตจากโค้ดข้างบนจะเห็นว่า <hr> ไม่ต้องกำหนด width: 100% เพราะเค้าเป็น display: block มาตั้งแต่กำเนิดนั่นเอง

ขอบคุณโค้ด CSS จาก Hugo และ Marwelln – Stackoverflow