0

I am trying to animate the border-bottom property of an element from the middle to left and right on hover. I can achieve this using the ::before pseudo-selector and setting its position absolute. I have commented out the code below.

But I can't do it using the border-bottom property. When I am animating it, it's animating vertically, not horizontally. Is it possible to achieve this using the border-bottom or the text-decoration property?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      button {
        border: none;
        background: none;
        color: red;
        font-weight: 900;
        position: relative;
      }
      button {
        transition: border-bottom-width 1s;
      }
      button:hover {
        border-bottom: 2px solid red;
      }
      /* button::before {
        background-color: rgb(255, 65, 97);
        content: "";
        display: block;
        height: 2px;
        position: absolute;
        margin: 0 auto;
        width: 0px;
        top: 25px;
        left: 0;
        right: 0;
        bottom: 0;
        transition: width 1s;
      }
      button:hover::before {
        width: 100%;
      } */
    </style>
  </head>
  <body>
    <button>Red Button</button>
  </body>
</html>
  • 1
    you cannot. Either use pseudo element or background (check the duplicate) – Temani Afif Mar 20 '21 at 13:29
  • @TemaniAfif I saw that you used the background properties to do the animation. But it was from left to right. So, it is possible to animate from middle to both side using the background properties? –  Mar 20 '21 at 13:49
  • 1
    https://jsfiddle.net/2tzg70w3/ – Temani Afif Mar 20 '21 at 14:00

0 Answers0