How do i add an horizontal line using html and css in bootstrap 4-CodePudding

I want to add a small horizontal line like the one on the page. I tried using the <hr\> tag but i don't get the desired line, is there any other way to add this line. The code below describes what i've done so far to construct the line but i have not been able to achieve it. Please could someone help me create the line Thanks

My code:

HTML:

<div >
<div >
<div ></div>
</div>
<div >
<h1 >STYLISH AXURE DESIGN</h1>
<hr style="width:80px;height:2px;text-align:left;margin-left:660px;border: 1.5px solid white; color: white;">
<p >Use the selections you need, remove the lines you don't need.Create gorgeous prototypes faster than ever!</p>                             <div >
<button  type="button">Download</button>
</div>
</div>
</div>
</div>
</div>

CSS:

.second-bg-cover{
    background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.5)) ,url(../img/state1.jpg);
    width: 100%;
    height: 320px;
    background-repeat: no-repeat;
    position: relative;
    z-index: -1;
  }

  .second-cover-heading {
    position: absolute;
    z-index: 1;
    padding: 60px 0;
    color: var(--white);
  }

  .second-cover-photo-section h1{
    font-family: 'Raleway',sans-serif;
    font-weight: 400;
  }
  .second-cover-download{
    background: transparent;
    color: white;
    padding: 8px 18px;
    border-color: var(--white);
    position: relative;
    z-index: 2;

  }
  .second-cover-download{
    margin-left:580px;
    margin-top: 25px;
  }

CodePudding user response：

You can use the ::after like this:

HTML:

<h1 >STYLISH AXURE DESIGN</h1>

CSS:

.with_underline::after{
  content: "";
  height: 3px;
  width: 120px;
  background: red;
  display: block;
  margin: 0 auto;
  margin-top: 10px;
}

Here's the fiddle: https://jsfiddle.net/43e6r07m/

CodePudding user response：

You can use the hrtag to create a line, or create a class named "spacer" that will allow you to customize the line. For example :

  .spacer{
            width:100%;
            border:2px solid rgba(0,0,0,0.2);
            margin:0;
            box-sizing: border-box;
  }
  .myContainer{
            width:80%;
            margin-left:auto;
            margin-right:auto;
  }

  <div >
        Lorem ipsum dolor sit amet...
        <div ></div>
  </div>