Home / Questions / 74915
Accepted
May
Asked: 2020-06-01 19:33:33 +0800 CST 2020-06-01 19:33:33 +0800 CST

How to create two borders that separate the main text?

  • 772

I am trying to create two borders one on the left and one on the right and the main text is in the middle of the two borders.

An example to idea to what I am trying to achieve I have uploaded two sample images.

I tried doing it this way but the two lines come together.

    <div class="www">

      <h4><span class="lineseparator"></span>
        TITLE NOT TITLE
        <span class="lineseparator"></span>
      </h4>

      <p>Content and content and contecnt</p>
    </div>

I tried this other way but same problem.

    <div class="www">
      <span class="lineseparator"></span>
      <h4>TITLE NOT TITLE</h4>
      <span class="lineseparator"></span>
      <p>Content and content and contecnt</p>
    </div>

Execution:

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 13px;
  font-family: 'OpenSans', 'cursive', 'Releway', Roboto, Lato, Utsaah;
  background-color: #FBFBFB;
}
.www {
  position: relative;
  padding-top: 35px;
}
.lineseparator {
height: 1px;
border-top: 1px solid #000;
display: block;
position: relative;
top: 12px;
width: 20%;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
}

p {
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
}
    <div class="www">
      <span class="lineseparator"></span>
      <h4>TITLE NOT TITLE</h4>
      <span class="lineseparator"></span>
      <p>Content and content and contecnt</p>
    </div>

<br><br><br>
    <div class="www">
      
      <h4><span class="lineseparator"></span>
        TITLE NOT TITLE
        <span class="lineseparator"></span>
      </h4>
      
      <p>Content and content and contecnt</p>
    </div>

What I want to achieve is the following example I take it from a website. enter image description here

And that when making responsive it adapts in the following way. enter image description here

html

4 Answers

  1. Try the following:

    .in-middle {
  width: 100%;
  height: 20px;
  border-bottom: 1px solid black;
  text-align: center;
}

.tittle-pad-size {
  font-size: 40px;
  background-color: #ffffff;
  padding: 0 10px;
}
    <div class="in-middle">
  <span class="tittle-pad-size">What you get?</span>
</div>

<div class="www">
  <p>Course for all!</p>
</div>

    • 3

  2. What you want to do can be done in different ways. An easy way would be for example using a pseudo-element ::afterto make the line horizontal, and then overlaying the text with one spanthat has the same background as the page.

    Something like this:

    h4 {
  text-align: center;
  position:relative;
}

h4 span {
   background: white;
   position:relative;
   z-index:1;
   padding:0px 10px;
}

h4::after {
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  border-bottom:1px solid #dddddd;
  z-index:0;
}
    <h4>
  <span>TÍTULO DE SECCIÓN</span>
</h4>

    • 1
  3. Best Answer

    Another way to do it would be to use the pseudo-elements ::beforeand ::aftertogether with Flexbox. This method is (or at least it seems to me) quite interesting because no additional tags are needed, it will just h4work with it.

    The idea is:

    • Add display:flexto header.
    • Adds the two pseudo-elements ::beforeand ::afterempty with a top border.
    • Set flex:1pseudo-elements to take up all available space.
    • Use transformations to offset the pseudo-elements by 50% of the height.

    And here you can see it working:

    h4 {
  display:flex;
}

h4::before, h4::after {
  content:"";
  flex:1;
  border-top:1px solid #cccccc;
  margin:0px 10px;
  transform:translateY(50%)
}
    <h4>TÍTULO CON BORDES LATERALES</h4>

    • 1 

  4. <!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    /*
    * {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 13px;
  font-family: 'OpenSans', 'cursive', 'Releway', Roboto, Lato, Utsaah;
  background-color: #FBFBFB;
}/*
.www {
  position: relative;
  padding-top: 35px;
}
.lineseparator {
height: 1px;
border-top: 1px solid #000;
display: block;
position: relative;
top: 12px;
width: 20%;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
}

p {
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
}*/


.primero{
  border-left:4px red solid;
  </style>

</head>
<body>
<!--
 <div class="www">
      <span class="lineseparator"></span>
      <h4>TITLE NOT TITLE</h4>
      <span class="lineseparator"></span>
      <p>Content and content and contecnt</p>
    </div>

<br><br><br>
    <div class="www">
      
      <h4><span class="lineseparator"></span>
        TITLE NOT TITLE
        <span class="lineseparator"></span>
      </h4>
      
      <p>Content and content and contecnt</p>
    </div>-->


<CENTER>
    <div class="primero">
    <h3>TITULO</h3>
    <P>INFORMACION BLABLABLA</P>

      
    </div>
</body>
</html>

    Something like this but curved?

    • -1