Как сделать линию под текстом?

Question

[AleksandrMurkup]

Всем привет. Посоветуйте как лучше решить проблему. Есть текст справа и слева и черная линия. Нужно сделать так, чтобы не задавая тексту никакой фон, он перекрывал черную линию в месте своего размера.
https://jsfiddle.net/sropwj1p/

Comments

[iBird Rose]

а как это по твоему должно выглядеть?

[AleksandrMurkup]

iBird Rose: Должно выглядеть вот так https://jsfiddle.net/2c43v71s/ , но мне это не подходит, т.к. на фоне будет картинка не однотонная.

[iBird Rose]

AleksandrMurkup: ну вот в этом и прикол что ты перекрываешь фоном. а если фона нет. как бы пофиг полоска спереди или сзади текста. она все равно будет наложена. так что только либо фоном, либо режь полоску

[Сергей Тутуков]

AleksandrMurkup: без абсолютного позиционирования.
codepen.io/STutukov/pen/wgrJXj

[Сергей Тутуков]

AleksandrMurkup: вообще есть миллион способов сохранить прозрачный фон.
Можно таблицей сделать, flex, text-align:justify...

[AleksandrMurkup]

Сергей Тутуков: Спасибо!)
Работает. немного протупил сам))

Answer 1

[Павел]

.bg-line {
  float: left;
  width: 80%;
  height: 1px;
  background-color: #000;
  position: absolute;
  top: 9px;
  left:10%;
  text-align:center;
}

Так?

Или:

.bg-line {
}
.bg-line:after{content: "";position: absolute;height:2px;background: #000000;top: 9px;width:80%;left:10%;}