I want to add a separator line right after H1 tag, I tried but it's not working, can anyone help?

<style>

    #sepr{border-top-width: 3
    px;
        border-top-style: solid;
        border-top-color: #FF563A;
        max-width: 18%;
        display:inline-block;
    }
</style>
    <h1>Test</h1><div id="sepr"></div>

Line is showing above title when I put some text inside <div id="sepr">

<h1>Test</h1><div id="sepr">Test title</div>

Expected result:

CodePudding user response：

There are several possibilities. One would be to work with Flex. Set the wrapper element to flex. You can then set the line to the correct position with margin-top:XX px;.

The disadvantage is that you always have to adjust margin-top as soon as you have a different font size.

.sepr {
  display:flex;
  align-items: center;
}

.sepr .line {
  flex: 1;
  height: 3px;  
  background-color: #FF563A;
  margin-top:30px;
  
}

.sepr h1 {  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 50px;
  color: lightblue;
  padding: 0 1rem;
}

<div class="sepr">
  <h1>Test</h1>
  <div class="line"></div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

here is CSS and HTML

body{
  max-width: 1100px;
  margin: 2rem auto;
}
.separator{
  display:flex;
  align-items: center;
}

.separator .line{
  height: 3px;
  flex: 1;
  background-color: red;
}

.separator h1{
  padding: 0 2rem;
}

<div class="separator">
  <h1>Test</h1>
  <div class="line" style="margin-top:12px"></div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>