CSS стиль для hr

Когда-то давно, лет 100 назад :) я был озадачен проблемой. В моем мега-крутом шаблоне от GavikPRo не отображался стиль для разделителя <hr />.

Я, честно говоря, тогда не совсем понимал что такое CSS, поэтому для меня было сложно сделать что-то типа разделителя для сайта. В статье та он был, в код я не смотрел, мой опыт оставлял желать лучшего. Вот и хочу тебе, мой друг, помочь. Если ты не знаешь что-то, то не переживай, все приходит с опытом.

Вот этот стиль добавь на свою индексную страницу между тегами <style>hr{.....}</style>, или добавь его в файл css твоего мега-крутого шаблона.

hr{ 
   border: 0;
   border-bottom: 2px dotted #333;
}

Результат:

---

hr{ 
   border: 0;
   border-bottom: 4px solid #000;
}

Результат:

---

hr{
    border: 0;
    width: 100%;
    display: block;
    box-sizing: border-box;
    height: 4px;
    background: repeating-radial-gradient(#000, transparent 100px);
}

Результат:

---

hr{
    border: 0;
    width: 100%;
    display: block;
    box-sizing: border-box;
    height: 4px;
    background: repeating-linear-gradient(45deg, #000, transparent 100px);
}

Результат:

---

hr.hr3 {
 overflow: visible;
 padding: 0;
 border: none;
 border-top: medium double #333;
 color: #333;
 text-align: center;
}

hr.hr3:after {
 content: "§";
 display: inline-block;
 position: relative;
 top: -0.7em;
 font-size: 1.5em;
 padding: 0 0.25em;
 background: white;
}

Результат:

---

Говоря о крутости, как я упоминал, все приходит с опытом.

Сегодня я понимаю, что никакой шаблон не заменит собственные руки и голову.

Конечно, есть какая-то основа, например, стандартный шаблон, но все же оригинальности можно добиться, используя знания и только знания. Я рекомендую тебе научиться самому создавать стили, писать CSS код без подсказок и вообще научиться в нем разбираться, если ты только осваиваешь web-строительство.