Hr line between and after title

Question

I want to make an hr line before title and an hr line after title. I am using Bootstrap 5 and I managed to get that before and after title there are a line but I am stuck 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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="col-md">
        <div class="col-md">
            <div class="">
                <div class="container">
                    <h1 class="decorated"><span>My Title</span></h1>
                </div>
            </div>
        </div>
    </div>

This is what I should get:

You want the lines to go completely to the side of the screen? — ninadepina, Dec 19 '22 at 12:30
Does this answer your question? [CSS technique for a horizontal line with words in the middle](https://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal-line-with-words-in-the-middle) — ninadepina, Dec 19 '22 at 12:32
@ninadepina Yes from left side till tile and after title till right side. — Mārcis, Dec 19 '22 at 12:32
@ninadepina Thanks for providing a link, but I have that already. I need to get lines from the left side to the title and from the title to the right side of the screen. I am using the container class to align the title in the page container class. — Mārcis, Dec 19 '22 at 12:35

Ahmed M. Znaty · Answer 1 · 2022-12-22T12:54:57.027

2

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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="col-md">
        <div class="col-md">
            <div class="">
                <div class="container">
                    <h1 class="decorated"><span>My Title</span></h1>
                </div>
            </div>
        </div>
    </div>

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

Edited

If you want to be able to move the right and left divs seperately then you can just do that:

.decorated{
    overflow: hidden;
    position: relative;
}
.decorated > span{
    display: inline-block;
    background: white;
    padding: 0 10px;
    position: relative;
    
    /* play with this one to move the text itself */
    left: 20%;
}
.decorated > span::before{
    content: ''; width: 100vw;
    position: absolute; left: -100vw;
    border-bottom: 2px solid blue;
    
    /* This move the left line up and down */
    top: 40%;
}
.decorated > span::after{
    content: ''; width: 100vw;
    position: absolute; right: -100vw;
    border-bottom: 2px solid red;
    
    /* This move the right line up and down */
    top: 70%;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="col-md">
        <div class="col-md">
            <div class="">
                <div class="container">
                    <h1 class="decorated"><span>My Title</span></h1>
                </div>
            </div>
        </div>
    </div>

edited Dec 22 '22 at 12:54

answered Dec 19 '22 at 13:20

Ahmed M. Znaty

416
9

1

This does not work, as I need the first hr line to be higher and the hr line before the title to be below, as shown in the image. – Mārcis Dec 21 '22 at 14:10
I got the idea now.. I will try to find a way to do it, if I get a good way to apply it, I will share it with you. – Ahmed M. Znaty Dec 21 '22 at 16:32
1

Thank you! Right now I have no idea how to do this correctly, because one way is to use 100vw but then website size goes to screen size. – Mārcis Dec 22 '22 at 11:54
@Mārcis I added another try after the one I put before, check it out in the same answer here. – Ahmed M. Znaty Dec 22 '22 at 12:55
Thank you! I tested and it is working, but the same problem remains, it is only visible in container div and not full screen. – Mārcis Dec 22 '22 at 13:39
My suggestion is to remove the container and just align the title by some margins and paddings as usually are used for bootstrap container class. I will try this a bit later. – Mārcis Dec 22 '22 at 13:47
You must figure out that the lines on the left and the right are too long and going outside the screen, and we prevented them from showing by applying `overflow: hidden;` for their parent element. And you can just use this element wherever you like. I don't understand exactly what did you mean with full screen visibility. – Ahmed M. Znaty Dec 22 '22 at 14:01
For full-screen visibility, I mean that I go from the left screen side to the right screen side. – Mārcis Dec 22 '22 at 14:12
@Mārcis But the reason in this issue is the `bootstrap` container which has a big padding in the left and the right. Which means, the lines are already fills the possible place, if they found more space they will fill them. – Ahmed M. Znaty Dec 24 '22 at 14:05

score 1 · Answer 2 · answered Dec 19 '22 at 13:42

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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md">
  <div class="col-md">
    <div class="">
      <div class="container">
        <h1 class="decorated"><span>My Title</span></h1>
      </div>
    </div>
  </div>
</div>

Event with margin 0, the page still goes to the edge of the screen. — Mārcis, Dec 19 '22 at 19:03

score 0 · Answer 3 · answered Dec 19 '22 at 12:42

0

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

answered Dec 19 '22 at 12:42

ninadepina

661
2
12

No, I am sorry I am not a native English speaker, so it is harder for me to explain. I have a Bootstrap template and I use container class to align my content. Right now if I set margins to 0 it breaks entire website. My problem is that I need to align title using container and still get hr line from right screen side to title and from title till left side of screen. – Mārcis Dec 19 '22 at 12:46

Hr line between and after title

3 Answers3