Question 298267 in Html Question posted in
Some basic documentation can be found here.

Html – How can I make border go from left to right on hover and from left to right after hover?

I was wondering if I could make this border that goes from left to right on hover go from left to right after hovering as well. I have got this right now and the border goes back right to left after I hover. How can I do this?

Here is what I have right now:

h1 {
  color: #666;
  display: inline-block;
  margin: 0;
  text-transform: uppercase;
}

h1:after {
  display: block;
  content: '';
  border-bottom: solid 3px #019fb6;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}

h1.fromLeft:after {
  transform-origin: 0% 50%;
}
<h1 class="fromLeft">Expand from left</h1>
Tags:

4

Answers


  1. 0

    Is that what you need?

    h1 {
  color: #666;
  display: inline-block;
  margin: 0;
  text-transform: uppercase;
  position: relative;
}

h1:after {
  display: block;
  content: '';
  border-bottom: solid 3px #019fb6;
  transition: width 250ms ease-in-out;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 100%;
}

h1.fromLeft:hover:after {
  width: 100%;
}
    <h1 class="fromLeft">Expand from left</h1>
    Login or Signup to reply.
  2. 0

    Is this what you meant? An underline coming in from left-to-right and leaving from left-to-right.

    By aligning to the left when increasing and aligning to the right before reducing its size, we create the illusion that the background (the line) moves from left-to-right.

    The background repeats across lines, so the animation works even for multiline elements.

    h1 {
  position: relative;
  margin: 0;
  color: #666;
  display: inline-block;
  text-transform: uppercase;
}

.from-left {
  background-image: linear-gradient(to bottom, transparent .9lh, red .9lh);
  background-repeat: no-repeat;
  background-position-x: right;
  background-size: 0%;
  transition: background-size .15s;
}
.from-left:hover {
  background-size: 100%;
  background-position-x: left;
}
    <h1 class="from-left">Expand from left</h1>
    Login or Signup to reply.
  3. 0 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    /* Initial state */
        .box {
            position: relative;
            width: 200px;
            height: 100px;
            background-color: #f0f0f0;
            overflow: hidden;
        }

        /* Border settings */
        .box::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            border: 2px solid blue; /* Change the border color as needed */
            transition: left 0.3s ease-in-out;
        }

        /* Hover state */
        .box:hover::before {
            left: 0;
        }
    </style>
</head>
<body>

    <div class="box"></div>

</body>
</html>
    Login or Signup to reply.
  4. 0

    Try something like this.

    h1 {
  color: #666;
  display: inline-block;
  margin: 0;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

h1:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #019fb6;
  transform: scaleX(0);
  transform-origin: 0% 50%;
  transition: transform 250ms ease-in-out;
}

h1:hover:after {
  transform: scaleX(1);
}
    <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>uHost</title>
    <link rel="stylesheet" href="packages.css" />
  </head>
  <body>
    <h1>Hover Me</h1>
  </html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search