Hr line between and after title-CodePudding

I want to make that before title there is a hr line and after title there is a hr line. I am using Bootstrap 5 and I manage to get that before and after title there are a line but I am stack to make title tag aligned using container class and make the line from one screen side to another.

The question is how I get the lines to go full width using container to align content. This is what I have now:

.decorated{
    overflow: hidden;
  text-align: center;
}
.decorated > span{
   position: relative;
   display: inline-block;
}
.decorated > span:before, .decorated > span:after{
   content: '';
   position: absolute;
   top: 50%;
   border-bottom: 2px solid;
   width: 591px; /* half of limiter*/
   margin: 0 20px;
}
.decorated > span:before{
   right: 100%;
}
.decorated > span:after{
   left: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <div >
        <div >
            <div >
                <div >
                    <h1 ><span>My Title</span></h1>
                </div>
            </div>
        </div>
    </div>

This is what I should get:

CodePudding user response：

Your code looks as if it's almost there except for some reason you have limited the width of the two lines. This snippet makes them each 100vw so they are absolutely sure to be long enough.

It also removes the margin on body and overflow on the parent (otherwise you aren't going to get things to go to the edge of the screen) and uses CSS calc to displace the two lines 20px from the edge of the actual text (instead of the margin you had set on them as that was creating a margin on both ends).

* {
  margin: 0;
}

.decorated {
  text-align: center;
}

.decorated>span {
  position: relative;
  display: inline-block;
}

.decorated>span:before,
.decorated>span:after {
  content: '';
  position: absolute;
  top: 50%;
  border-bottom: 2px solid;
  width: 100vw;
  /* margin: 0 20px; */
}

.decorated>span:before {
  right: calc(100%   20px);
}

.decorated>span:after {
  left: calc(100%   20px);
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div >
  <div >
    <div >
      <div >
        <h1 ><span>My Title</span></h1>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

You can do a small trick, which is to put line as one ::before or ::after which is full with of the parent, and put the span upon it, and give the span a background color like the background of the parent.

.decorated{
    overflow: hidden;
    position: relative;
}
.decorated > span{
    display: inline-block;
    background: white;
    padding: 0 10px;
    position: relative;
    left: 20%;  /* play with this one as you like */
}
.decorated::before{
    content: '';
    position: absolute;
    top: 50%; left: 0px;
    border-bottom: 2px solid;
    width: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <div >
        <div >
            <div >
                <div >
                    <h1 ><span>My Title</span></h1>
                </div>
            </div>
        </div>
    </div>

Just play with the left value of the span and you are done.

CodePudding user response：

Add .container {margin: 0;}, is that the result you're looking for?