Как грамотно стилизовать h1 средствами CSS?

Question

[Артемий]

Здравствуйте!
Подскажите новичку:

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

Comments

[Евгений Петров]

В правильном

Answer 1

[Евгений Петров]

Ну один тэг ввести придётся jsfiddle.net/petroveg/52pbsh51

Update
Вариант, навеянный решением SelenIT2 jsfiddle.net/petroveg/52pbsh51/2
Вариант для совсем старых IE с указанием символа jsfiddle.net/petroveg/52pbsh51/3 (увы — пришлось подгонять его положение, но искать решение лень)

Comments

[Артемий]

Спасибо большое, это то, что нужно!

[Евгений Петров]

SelenIT2: Ну как я мог забыть про мастера?) Напиши свой вариант отдельно — он лучше и точно заслуживает высокой оценки:)

[Артемий]

SelenIT2: Спасибо за вариант! Пытаюсь подружить с IE...

[Евгений Петров]

С IE 9 и ниже вариант SelenIT2 вы не подружите.

[Артемий]

Евгений Петров: если не затруднит, подскажите, что не получится подружить в этом варианте. Пока только заменил градиенты на картинки...но похоже дело не в них. В вашем варианте загвоздка только в border-radius, но для него есть решение...

[Евгений Петров]

caniuse.com/#search=gradient
А насчёт border-radius в моём варианте — в content можно поставить символ круглого маркера.

[Артемий]

Где тут кнопка donate? Готов платить за наставничество по верстке :)

[Евгений Петров]

Илья, берись:)

[Валерий Суворов]

SelenIT2: ещё забыли text-transform: uppercase;

Answer 2

[Тимофей Белоусов]

Можно так

Answer 3

[monochromer]

Одним тегом с псевдоэлементами

.headline {
	margin: 0;
	position: relative;
	overflow: hidden;
	text-align: center;
}

  .headline:before,
  .headline:after {
	  content: "";
	  position: relative;
	  display: inline-block;
	  vertical-align: middle;
	  width: 100%;
	  height: 30px;
	  background-size:
		  100% 1px,
		  30px 30px;
  }

	.headline:before {
		right: .5em;
		margin-left: -100%;
		background: 
			linear-gradient(90deg, #000, #000) repeat-x center,
			radial-gradient(10px, #000 0%, #000 100%, rgba(0,0,0,.0) 100%) no-repeat right -5px center;
		 background-size:
		  100% 1px,
		  30px 30px;
	}
	.headline:after {
		left: .5em;
		margin-right: -100%;
		background: 
			linear-gradient(90deg, #000, #000) repeat-x center,
			radial-gradient(10px, #000 0%, #000 100%, rgba(0,0,0,.0) 100%) no-repeat left -5px center;
		 background-size:
		  100% 1px,
		  30px 30px;
	}

jsbin.com/jibujeluja/1/edit