Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Сниппеты » CSS Сниппеты » Линия из двух цветов

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


     01.05.2013    css, border, сниппет    CSS Сниппеты    6332

Простенький сниппет для реализации двухцветной полоски над текстом, если побаловаться с градиентами - можно сделать радугу))
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;
}
Демо

2 комментария

radcor
Юзер

radcor - 19 января 2014 13:56 -

Хорошее решение. Я на дивах это делал, но тут на много легче и меньше кода.

mikhailrojo
Юзер

mikhailrojo - 7 апреля 2016 20:46 -

спасибо чувак, супер решение - я долго думал как это можно сделать - только после того как нашел как ты реализовал - кажется так очевидно!
молодец

Чтобы комментировать - войдите или зарегистрируйтесь на сайте
наверх