Как сделать такой border?

Question

[issssrt]

См. пример - https://gyazo.com/855a62d0b511cdab29d71a9ab51020a9

Подскажите как грамотно реализовать такой бордер?
Если бы фон был чисто белым (не патерн), то я бы текст в span обернул и назначил бы ему фон чтобы перекрыть border, а тут как-то реально выйти из ситуации?

Comments

[issssrt]

Как вариант в голову приходить использование table

Answer 1

[rubtsoff]

Это в HTML

<h2 class="line-title"><span>This is my title</span><hr /></h2>

_______________________________________________
Это в css

.line-title {
    font-size: 20px;
    margin-bottom: 10px;
    padding-top: 1px; /* Allows for hr margin to start at top of h2 */
}

/* clearfix for floats */
.line-title:after {
    content: "";
    display: table;
    clear: both;
}

.line-title span {
    padding-right: 10px;
    float: left;
}

.line-title hr {
    border:1px solid #DDD;
    border-width: 1px 0 0 0;
    margin-top: 11px;
}

Answer 2

[Дарт Вейдер]

<div class="bproduct">
    <h2><span>Название</span></h2>
</div>

.bproduct>h2 {
    height: 10px;
    border-bottom: 3px solid #ED1C24;
    font-size: 14px;
    color: #ED1C24;
}

.bproduct>h2 span {
    float: left;
    padding: 0 10px 0 0;
    background-color: #fff;
    font-size: 14px;
    color: #ED1C24;
}

Вот пример https://jsfiddle.net/cg654owz/

Answer 3

[trushka]

Можно проще - https://jsfiddle.net/trushka/zs1pknsj/
Только надо явно размеры шрифта и line-height задать, ато по вертикали в разных браузерах плавает