Заголовок с линиями по бокам на CSS

Иногда нужно сверстать заголовок, у которого слева и справа располагаются линии, которые занимают все оставшиеся пространство. Для такого случая у меня есть рецепт как сверстать сложный заголовок с линиями по бокам текста
Не будем расписывать где и как это применять, так как если вы наткнулись на данную статью, вы сами знаете для чего Вам нужен такой заголовок, ниже я приведу код html и css, а так же live-демо на codepen

HTML:

<h1>WebGem.ru</h1>

CSS:

h1 {
    font-size: 4rem;
}
h1::before,
h1::after {
    display: inline-block;
    content: "";
    border-top: .3rem solid black;
    width: 4rem;
    margin: 0 1rem;
    transform: translateY(-1rem);
}

CODEPEN: