How to give an animation effect on hover using css or jquery on a section border

Question

.heading-text{
    font-family: verdana;
    font-size:12px;
    color:#124253;
    min-width:50px;
    height:32px;
    margin-top:8px;
    text-align: center;
    cursor: pointer;
}
.heading-text:hover{
    border-bottom-style:solid;
    border-bottom-color:#012b61;
    border-bottom-width:3px;
}

In the above division, I want to give an effect, since the lower border of the division starts on the left and goes to the right at the time of hovering, this is possible using CSS or JQUERY javascript

Please give an answer as quickly as possible or, if any other alternative way, also let me know

Answer 1

You can use svg for this. WATCH DEMO

HTML:

<div>
      <svg width="200" height="200">
          <line x1="0" y1="0" x2="600" y2="0" />
      </svg>
 </div>

CSS

div {
    width: 200px;
    height: 200px;
    position: relative;
    background: #ddd;
}

svg {
    position: absolute;
    top: 200px;
    left: 0;
}

svg line {
    stroke-width: 10;
    stroke: #000;
    fill: none;
    stroke-dasharray: 200;
    -webkit-transition: -webkit-transform .6s;
    transition: transform .6s;
}

div:hover svg line {
    -webkit-transform: translateX(400px);
    transform: translateX(400px);
}

Answer 2

You cannot really animate a pseudo-element, but you can add another element

<p class="heading-text">This is a heading</p>
<div class="line"></div>

and then do

$('.heading-text').on('mouseenter mouseleave', function(e) {
    $('.line').stop(true)
              .animate({width: e.type=='mouseenter' ? '100%' : '0'}, 1000);
});

Fiddle