CSS animated underline goes from left to right, and I need it from right to left

Asked Apr 28 '21 at 01:21

Active Apr 28 '21 at 02:24

Viewed 22 times

this is my first post, so, sorry in advance if i'm not explaining propperly.

I have this piece of code for an animated underline with CSS

.underline {
  background-image: linear-gradient(120deg, #005720 0%, #003513 100%);
  background-repeat: no-repeat;
  background-size: 10% 0px;
  background-position: 0 80%;
  transition: background-size 0.25s ease-out;
}

.underline:hover {
  background-size: 100% 3px;
}

<ul class="fs-4 list-group d-flex align-items-end list-group-flush">
<li class="underline bg-transparent  text-light list-group-item"><a class="fw-light text-white" style="text-decoration: none;" href="index_bienvenida">Bienvenida</a></li>
</ul>

I will appreciate any help! thanks

edited Apr 28 '21 at 02:24

asked Apr 28 '21 at 01:21

Nissa

If it goes from right to left... and you need it to go from right to left... sounds like it's working? – CertainPerformance Apr 28 '21 at 01:22
`background-position: 0 20%;` or `100% 80%` – Temani Afif Apr 28 '21 at 01:28

CSS animated underline goes from left to right, and I need it from right to left

0 Answers0