Transition style in heading on hover

Standard Headings Hover Effect with CSS Transition with Different Sizes

h1, h2, h3, h4, h5, h6 you can used any tag
You need to add .heading in your heading tag with href link <h1 class="heading"> <a href=""></a> </h1>

Standard CSS Code for website

    
     h1.heading > a, h2.heading > a, h3.heading > a, h4.heading > a, h5.heading > a, h6.heading > a {
       position: relative;
       color: #000;
       text-decoration: none;
     }

     h1.heading > a:hover, h2.heading > a:hover, h3.heading > a:hover, h4.heading > a:hover, h5.heading > a:hover, h6.heading > a:hover {
       color: #000;
     }
     
     h1.heading > a:before, h2.heading > a:before, h3.heading > a:before, h4.heading > a:before, h5.heading > a:before, h6.heading > a:before {
       content: "";
       position: absolute;
       width: 100%;
       height: 2px;
       bottom: 0;
       left: 0;
       background-color: #000;
       visibility: hidden;
       -webkit-transform: scaleX(0);
       transform: scaleX(0);
       transition: all 0.3s ease-in-out 0s;
     }
     
     h1.heading > a:hover:before, h2.heading > a:hover:before, h3.heading > a:hover:before, h4.heading > a:hover:before, h5.heading > a:hover:before, h6.heading > a:hover:before {
       visibility: visible;
       -webkit-transform: scaleX(1);
       transform: scaleX(1);
     }
    
   

All their equipment and instruments are alive.

     
      <h1 class="heading">
    <a href="#"> All their equipment and instruments are alive. </a>
   </h1>
     
    

using h1 tagg

All their equipment and instruments are alive.

     
      <h2 class="heading">
    <a href="#"> All their equipment and instruments are alive. </a>
   </h2>
     
    

using h2 tagg

All their equipment and instruments are alive.

     
      <h3 class="heading">
    <a href="#"> All their equipment and instruments are alive. </a>
   </h3>
     
    

using h3 tagg

All their equipment and instruments are alive.

     
      <h4 class="heading">
    <a href="#"> All their equipment and instruments are alive. </a>
   </h4>
     
    

using h4 tagg

All their equipment and instruments are alive.

     
      <h5 class="heading">
    <a href="#"> All their equipment and instruments are alive. </a>
   </h5>
     
    

using h5 tagg

All their equipment and instruments are alive.

     
      <h6 class="heading">
    <a href="#"> All their equipment and instruments are alive. </a>
   </h6>
     
    

using h6 tagg

Click here to Download Code Download