Линия из двух цветов

Простенький сниппет для реализации двухцветной полоски над текстом, если побаловаться с градиентами - можно сделать радугу))
HTML:

<h2>Lorem ipsum dolor sit.</h2>

CSS:

h2 {
    position: relative;
    display: inline-block;
    padding: 5px;
    border-top: solid 4px #f96;
}
h2:after {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    height: 4px;
    width: 40%;
    background: #444;
}

Источник:dle-faq.pro, DLE

Источник: smartZone

Перейти на сайт

Другие материалы на сайте b.Z - Записки о гаджетах, людях и музыке