How to Make Short Underline HTML & CSS

We Trying to achieve this design

Step 01:

First we have create a html div container and sub-section and inside we create  and h2 heading with span so we can use with class and use its into CSS for design

We have to create class attribute inside div

• .main-container 
• .subsection
• . nline  
• .uline 
• etc

and after it inside h2 <h2></h2> tag add span <span><\span> without anything

 <div class="main-container">

 

    

<div class="subsection">

  

    <h2 class="nline">The Normal Underline <span ></span></h2>

 

  <h2 class="uline">The Short Underline <span ></span></h2> 

  

  

</div>

  

  

  </div>

Step02:

For Creating short underline we have use ::after and content=" "; and 

border-bottom property help us to build this

Code -

.subsection .uline span::after {

    content: "";

    display: block;

    width:54px;

    padding-top: 5px;

padding-bottom:8px;

margin-right:54px;

    border-bottom: 12px solid orange;

    font-style: italic;

    /*background-image: linear-gradient(to right, rgb(245, 243, 243) , rgb(199, 199, 199));*/

    

}

 We are going to create css  and adding some property inside

.main-container, ,subsection, .uline, .nline class 

   body{

  font-family:sans-serif;

}

    .main-container{

  padding:20px;

  margin:10px;

  

}

.subsection{

padding:15px;

margin:8px;

height:70%;

width:80%;

border-radius:15px;

background-color:black;

color:white;

 

font-size:25px;

}

.subsection .nline span::after {

    content: "";

    display: block;

    /*width:54px;*/

    padding-top: 5px;

padding-bottom:8px;

    border-bottom: 12px solid orange;

    font-style: italic;

    /*background-image: linear-gradient(to right, rgb(245, 243, 243) , rgb(199, 199, 199));*/

    

}

.subsection .uline span::after {

    content: "";

    display: block;

    width:54px;

    padding-top: 5px;

padding-bottom:8px;

margin-right:54px;

    border-bottom: 12px solid orange;

    font-style: italic;

    /*background-image: linear-gradient(to right, rgb(245, 243, 243) , rgb(199, 199, 199));*/

    

}

Now we created an normal underline and short line

remember content =" ";
property to CSS because if you not add this span underline and short is not showing .

If you increase width you can increase length of underline as far as you want half of text or some custom design

For Complete Code Visit :

short-underline.html

Watch Video For Better Under-Standing: