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

Question

Всем привет! Учусь вёрстке. Нашел макетик для тренировки и в нём есть такой вот Title с 2-мя горизонтальными линиями слева и справа. Возможно ли средствами html + css сверстать такое? Или идти в сторону использования SVG? Подскажите или поделитесь ресурсами, где можно почитать об верстке таких элементов :)

Answer 1

Данный макет разумеется можно точь-в-точь сверстать, но в это мало практической ценности, если данные линии не являются границами каких-то блоков. Если вам нужны просто две линии по бокам текста, то можно разобрать данный код и настроить под себя:

.txt {
  position: relative;
  margin-left: 200px;
  font-size: 20px;
  line-height: 0px;
}
.txt::before {
  content: '';
  left: -100px;
  top: 0;
  width: 100px;
  height: 1px;
  background-color: black;
  position: absolute;
}
.txt::after {
  content: '';
  left: 38px;
  top: 0;
  width: 100px;
  height: 1px;
  background-color: black;
  position: absolute;
}

<h1 class="txt">Text</h1>

Если данные линии просто фоновый декор как на вот этом примере:

То проще использовать другие способы, например: фоновые изображения, спрайты и т.д.

БЛОГ НА HUSL

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

Ответы (1 шт):