Question 203261 in CSS Question posted in
Some basic documentation can be found here.

Css – Can i move or translate() pseudo element (::after, ::before) under a text on hover?

I’m trying to translateX() a ‘dot’ under a text from one end to another, but just across the width of the text.

Here’s what I’ve tried, but it doesn’t work. Have you any solutions to that?

.wrapper ul li a::before{
  display: block;
  position: absolute;
  content: "";
  background-color: black;
  height: 3px;
  width: 3px;
  bottom: 0;
  left: 0;
  transform: scale(0);
  transition: transform 0.3s ease-out;
}
.wrapper ul li a:hover::before{
  transform: scale(1);
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I've figured it out. I've used animation + @keyframes to transision the pseudo element. Here's how.

    .wrapper ul li a::before{
  display: block;
  position: absolute;
  content: "";
  background-color: black;
  height: 3px;
  width: 3px;
  left: 100%;
  bottom: 0;
  transform: scale(0);
}
.wrapper ul li a:hover::before{
  transform: scale(1);
  left: 100%; 
  animation: transition 1s infinite;
  animation-timing-function: linear;
}
@keyframes transition {
  0% {left:0;}
  20% {left:20%;}
  30% {left:30%;}
  45% {left:45%;}
  65% {left:65%}
  75% {left:75%}
  90% {left:90%}
  100% {left:100%}
}

  2. 0

    Make the parent div position relative to see the dot
    You need to make a tag to position relative

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search