HTMLالوسم <hr>

تعريفه

نستخدم الوسم <hr> لعرض خط أفقي في الصفحة.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <br>.

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا بعرض خط أفقي بين الفقرتين.

<p>In Harmash.com you can learn every thing you need for free.</p>
<hr>
<p>You can learn Algorithms, Java, C++, Python, SQL etc..</p>

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
}

نصائح و ملاحظات

في حال أردت تغيير شكل الخط الإفتراضي للوسم <hr> و إظهار رمز أو كلمة ما على الخط يمكنك فعل ذلك بواسطة كود CSS.

في المثال التالي قمنا بتغيير تصميم الوسم <hr> ليظهر في الصفحة خطين فوق بعض و في وسطهم الرمز §.

hr {
    border: none;
    border-top: 3px double #333;
    color: #333;
    overflow: visible;
    text-align: center;
    height: 5px;
}

hr:after {
    background: #fff;
    content: '§';
    padding: 0 4px;
    position: relative;
    top: -13px;
}