JSFiddle - React, Tailwind, and code Playground

by isqua

HTML

<div class="container">
    <h1>Текст</h1>
    <h1>Длинный текст</h1>
</div>

CSS

.container
{
    padding: 10px;

    background: url(http://img-fotki.yandex.ru/get/6824/26913876.2a/0_b5af1_503de577_orig);
    background-position: 50% 80%;
    background-size: cover;
}
h1
{
    font-family: Arial;
    font-size: 24px;
    font-weight: normal;

    overflow: hidden;

    text-align: center;

    color: #fff;
}

h1::before,
h1::after
{
    position: relative;

    display: inline-block;

    width: 50%;

    content: '';
    vertical-align: middle;

    border-top: 2px solid #fff;
}
h1::before
{
    right: 20px;

    margin-left: -50%;
}
h1::after
{
    left: 20px;

    margin-right: -50%;
}