forgottofly forgottofly - 6 months ago 25
HTML Question

Custom css for hr tag

I'm declaring css for hr tag like ..

hr {
height: 2px !important;
background-color: #A2B1B9;
width: 9%;
margin-left: 0px;
margin-top:auto;
}


But the width of the hr tag dosen't always need to be the same as per the text that it is supported with. Please refer to the screen shot.
image

In this case I can either supply differen width along with the hr tag using inline css like . But as inline css dosen't fit to the ethical standards of web development is there any other approach that I could follow to make it dynamic?

Answer

HI now try to this way

Create a class and used to this css . it's the best option for your .

.customHr{
 padding-bottom:5px;
  border-bottom:solid 2px black;
  display:inline-block;
  vertical-align:top;
  color:blue;
}
<p>Custom Text here</p>
<p><span class="customHr">Custom Text here</span></p>
<p>Custom here</p>
<p>Custom Text</p>
<p><span class="customHr">Custom</span></p>
<p>Custom Text here</p>
<p>Custom Text here</p>