how to make a divider line?

Question

I'm trying to figure out how to make two divider lines, that are separated by text. see pic for example

devider lines on a web page

I can make a single line,

but I don't know how to make two that or inline and have text in the middle.

display:flex, and 2 pseudos to fill empty sides and draw the lines ;) https://stackoverflow.com/questions/32871330/use-before-and-after-elements-to-fill-remaining-space-of-text-element/32871864#32871864 ... there must hundreds duplicate ;) — G-Cyrillus, Jun 18 '18 at 22:32

agustin · Accepted Answer · 2018-06-18T22:31:32.727

If the background is just a solid color then you can create a container width a width 100%; height: 1px container and put the text on the middle, with a bigger z-index and the same background color as the page background.

Here is an example (using a pseudo-element to create the line)

body {
 background: #fafafa;
 font-size: 15px;
 font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
}

.section-header {
 position: relative;
 text-align: center;
}

.section-header:before {
 content: '';
 z-index: 1;

 position: absolute;
 left: 0;
 top: 50%;
 transform: translateY(-50%);

 width: 100%;
 height: 1px;

 background: #dddddd;
}

 .section-header__title {
  position: relative;
  z-index: 2;

  background: #fafafa;
  padding: 5px 20px;

  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;

  display: inline-block;

  color: #174750;
 }

<div class="section-header">
 <span class="section-header__title">Day 1</span>
</div>

score 1 · Answer 2 · answered Jun 18 '18 at 23:09

Try this. Create a div with two hr and a span. Then give it some styles. For example:

 <style>

 .pos_left{

 color: #f00;
 width: 40%;
 }

 .pos_right{

 color: #f00;
 width: 40%;
 }
span{
 width: 10%;
 }


.line{
position: absolute;
top: 10%;
width: 40%;
display: flex;
flex-wrap: wrap;
}

 </style>

 <div class='line'>
 <hr class='pos_left'><span>Day 1</span><hr 
 class='pos_right'>
 </div>

You can style and position it accordingly.

this worked, thanks! – sparkie the DOG Jun 19 '18 at 18:48 — sparkie the DOG, Jun 19 '18 at 18:48

score 1 · Answer 3 · answered Jun 18 '18 at 23:19

Something like this should work fine. Also if you want to increase the space between the text and the lines, just increase the second value of the "padding: 0px 10px;" eg. "padding: 0px 25px;"

<div style="margin-top: 20px; width: 100%; height: 10px; border-bottom: 1px solid #e3e3e3; text-align: center; margin-bottom: 30px;">
  <span style="font-size: 15px; background-color: #ffffff; padding: 0px 10px;">
    SOME TEXT HERE
  </span>
</div>

how to make a divider line?

3 Answers3