Как сделать такие заголовки под любую ширину и цвет?

Question

[freeman0204]

Код Кроме палочек по бокам на концах палочек должны быть круги. Как их можно сделать?
Возникает несколько нюансов в создании универсальности такого заголовка:
- Нужно что бы он был по центру.Когда заголовок по умолчанию блок то текст алигн центр работает. Но что бы координаты от самого заголовка надо дать ему дисплей инлайн блок но тогда он не будет по центру, если только задать родителю текст алигн центер что не совсем хорошо, так как он все выровняет по центру что может.
- Обычно такие заголовки бывают разных цветов.
- Так как текста в заголовках может быть по разному то длинна палочек разная

Задача в том что бы сделать универсальную фиговину с этих палочек в двух цветах и что бы ширина автоматически менялась в зависимости от ширина заголовка.

Как лучше это реализовать?

Answer 1

[Сергей ZSA]

Как вариант - рисовать 2 svg, которые будут как раз с кружками и палочками (ну или png если с svg не сложилось), далее через inline-block делаем и :before и :after, им ставим vertical-align:middle; а внутри самого заголовка используем span у которого всё тоже самое. Затем у before и after прикиньте максимальную и минимальную ширины (минимальная - сам шарик можно взять) и задавайте бекграунд с вашими картинками палочки и шарика чтоб были относительно верха и низа по центру ну и у одного фон слева, у другого справа. Должно всё заработать (хотя с шириной фиг знает, надо пробовать).

Answer 2

[ArturArturov]

линии без кружков:

h2 {
  position: relative;
  display: inline-block;
  background: #fff;
  padding: 0 20px;
}

h2:before {
  content: '';
  position: absolute;
  width: 200%;
  height: 2px;
  background: red;
  top: 15px;
  left: -50%;
  z-index: -1;
}

для кружков надо добавить структуры. если кружки только по краям (слева и справа), то ничего сложного.
добавить 1 див

Answer 3

[Антон Федорян]

https://jsfiddle.net/slippyk/wykrcx7z/

Answer 4

[Олег]

Как вариант изватиться ;) https://jsfiddle.net/joomla/vj9Lzutj/