HTML/CSS

Заголовок с горизонтальной линией посередине

Один из способов сделать заголовок с горизонтальной линией по центру без изображения (background-image).
Есть недостаток – фон под заголовком должен быть однотонным иначе span будет виден.

Пример:

Полный пример на jsfiddle

<div class="title">
    <span>Рекомендуем</span>
</div>
.title {
    font-size: 20px;
    color: rgb(50, 50, 50);
    text-transform: uppercase;
    line-height: 1.5;
    text-align: center;
    position: relative;
}
    .title span {
        background: #fff;
        display: inline-block;
        padding: 0 18px;
        position: relative;
    }
    .title:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;        
        width: 100%;
        height: 2px; /* ширина линии */
        background: #f3f4f2; /* цвет линии */
    }
07 декабря 2016