.hover { width: 0px; height: 7px; background-color: #9ed048; border-radius: 7px; position:absolute; transition: width 1s; } .hover:hover { width: 300px; } .hover-2 { background-image: linear-gradient(transparent calc(65% - 5px), #9ed048 5px); padding-right: 10px; background-size: 0; background-repeat: no-repeat; display: inline; transition: 0.5s ease; } .hover-2:hover{ background-size: 100%; }