Title with dynamic horizontal lines on the side [closed] - css

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Hi there,
This is in regards to the image I posted above. I feel like it's something that should be easy, but I just can't figure it out. I basically have a DIV that is the container with the darker see through BG and inside it I have some text that's centered. To the left and right of the text I have these horizontal lines of equal width.
Now the trick is that those horizontal lines, change their width based on how much text I have in the middle so there's always the same "padding" around the sides of the text. It's important to note that the background is not a flat color, but an image and the container with the darker BG is see through. If it was a flat color I could just add a thick shadow to the text of the same color as the BG and just have that line be the background of that DIV all the way through in which case the shadow of the text would make it look as its interrupted behind the text. The container also has a dynamic width, something like 80% for example.
Anyone have any idea how I could get this done? Thank you very much in advance!

Answer 1

You can use pseudo element and rgba() colors, this is a common way to do it : DEMO
HTML test
<header>
<h1> MY CENTERED TEXT</h1>
</header>
CSS test
header {
padding:3em;
background:url(http://lorempixel.com/600/50/nightlife) ;
background-size: cover;
}
h1 {
background:rgba(0,0,0,0.5);
color:white;
padding:1em 0;
text-align:center;
overflow:hidden;
}
h1:before, h1:after {
content:'';
width:100%;
border-bottom:lightgray solid;
display:inline-block;
vertical-align:middle;
}
h1:before {
margin-left:-100%;}
h1:after {
margin-right:-100%;}