Placing line to to the left and right of h1's - html

Question

I have this fiddle and what I am trying to do is place the line directly to the left and right of the h1's and scale respectively during a resize of window. So it should look like this.
----This that this
Here we go-----
I have attached the fiddle. I have tried floating the div left and making it absolute but I'm having no luck. I have only left one div which is a red bar and removed the other one. Once I learn to do one I can do the other one. Any help is appreciated.
HTML
<h1 class="mainPageTopText">
Find this that this.
<div class="banner-bottom"></div>
</h1>
<h1 class="mainPageBottomText">
Here we go.
</h1>
</div>
</div>
CSS
.mainPageWriting {
display: flex;
}
.mainPageTopText {
width: 500px;
position: absolute;
margin-right: 400px;
margin-top: 50px;
z-index: 12;
font-family: 'Luxim';
background: rgba(255, 255, 255, 1.0);
color: black;
}
.banner-bottom {
height: 10px;
width: 100%;
left: 0;
position: absolute;
background-color: red;
z-index: 100;
}
.mainPageBottomText {
position: absolute;
margin-top: 100px;
padding-left: 100px;
z-index: 12;
font-family: 'Luxim';
background: rgba(255, 255, 255, 1.0);
color: black;
}
.centered {
background: #1D2731;
display: flex;
align-items: left;
justify-content: center;
height: 100%;
}
.banner-bottom {
height: 10px;
width: 100%;
left: 0;
position: absolute;
background-color: red;
z-index: 100;
}
Fiddle
https://jsfiddle.net/angatvir/aujrkpLk/183/

Answer 1

I hope this is the answer you're looking for
based on
----This that this
Here we go-----
and not
----This that this Here we go-----
#special {
}
#first {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "line text .";
}
#first .line {
grid-area: line;
height: 5px;
align-self: center;
background: red;
}
#first .text {
grid-area: text;
}
#second {
display: grid;
grid-area: text-below;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: ". text line";
}
#second .line {
grid-area: line;
height: 5px;
align-self: center;
background: green;
}
#second .text {
grid-area: text;
}
<h1 id="special">
<span id="first">
<span class="text">This that this</span>
<span class="line"></span>
</span>
<span id="second">
<span class="text">Here we go</span>
<span class="line"></span>
</span>
</h1>

Answer 2

Looks quite simple, you can use psudo elements for this.
.mainPageTopText::before,
.mainPageTopText::after {
content: '----';
display:inline;
}
<h1 class="mainPageTopText">
Find this that this.
Here we go.
</h1>

Answer 3

Use :before and :after and in content set the line you can also style it
.mainPageWriting {
display: flex;
}
.mainPageTopText {
width: 500px;
position: absolute;
margin-right: 400px;
margin-top: 50px;
z-index: 12;
font-family: 'Luxim';
background: rgba(255, 255, 255, 1.0);
color: black;
}
.mainPageTopText:before{
content:'----';
}
.mainPageBottomText {
position: absolute;
margin-top: 100px;
padding-left: 50px;
font-family: 'Luxim';
background: rgba(255, 255, 255, 1.0);
color: black;
}
.mainPageBottomText:after{
content:'-----';
}
.centered {
background: #1D2731;
display: flex;
align-items: left;
justify-content: center;
height: 100%;
}
.banner-bottom {
height: 10px;
width: 100%;
left: 0;
position: absolute;
background-color: red;
z-index: 100;
}
<div class="centered">
<div class="mainPageWriting">
<h1 class="mainPageTopText">
Find this that this.
</h1>
<h1 class="mainPageBottomText">
Here we go.
</h1>
</div>
</div>

Answer 4

Update your css and html like this
HTML
<div class="centered">
<div class="mainPageWriting">
<h1 class="mainPageTopText">
<div class="left-line"></div>
Find this that this.
</h1>
<h1 class="mainPageBottomText">
Here we go.
<div class="right-line"></div>
</h1>
</div>
</div>
css
.centered {
background: #1D2731;
display: flex;
align-items: left;
justify-content: center;
height: 100%;
}
.mainPageWriting{
padding:50px 100px;
}
.mainPageTopText {
width: auto;
position: relative;
/* margin-right: 400px; */
margin-top: 50px;
z-index: 12;
text-align: left;
margin: 0px;
font-family: 'Luxim';
padding-left: 50px;
padding-right: 50px;
background: rgba(255, 255, 255, 1.0);
color: black;
}
h1 .left-line {
content: "";
position: absolute;
width: 40px;
height: 2px;
background: #000;
top: 17px;
left: 0px;
}
.mainPageBottomText {
position: relative;
/* margin-top: 100px; */
/* padding-left: 100px; */
text-align: right;
z-index: 12;
margin: 0px;
padding-left: 50px;
padding-right: 50px;
font-family: 'Luxim';
background: rgba(255, 255, 255, 1.0);
color: black;
}
h1 .right-line {
content: "";
position: absolute;
width: 40px;
height: 2px;
background: #000;
top: 17px;
right: 0px;
}

Answer 5

Try This code Below added some styles. You can make use of the pseudo elements to give the lines. removed banner-bottom div.
.mainPageWriting {
display: flex;
}
.mainPageTopText {
width: 500px;
position: absolute;
margin-right: 400px;
margin-top: 50px;
z-index: 12;
font-family: 'Luxim';
background: rgba(255, 255, 255, 1.0);
color: black;
}
.mainPageBottomText {
position: absolute;
margin-top: 100px;
padding-left: 100px;
z-index: 12;
font-family: 'Luxim';
background: rgba(255, 255, 255, 1.0);
color: black;
}
/*** add these */
.mainPageTopText::before{
content:"";
position:absolute;
height:0;
border:1px dashed;
width:20%;
top:0;
bottom:0;
left:-25%;
margin:auto;
}
.mainPageBottomText::after{
content:"";
position:absolute;
height:0;
border:1px dashed;
width:20%;
top:0;
bottom:0;
right:-25%;
margin:auto;
}
/** add these **/
.centered {
background: #1D2731;
display: flex;
align-items: left;
justify-content: center;
height: 100%;
}
<div class="centered">
<div class="mainPageWriting">
<h1 class="mainPageTopText">
Find this that this.
</h1>
<h1 class="mainPageBottomText">
Here we go.
</h1>
</div>
</div>