0

Goal: move arrow to the right while hovering the area near the title and the arrow.

Problem: no matter what selector do I use, either > or without, arrow does not move.

https://codepen.io/aetrnm/pen/KKmBdpy

a, a:hover, a:visited, a:active {
  color: inherit;
  text-decoration: none;
 }

.container {
  color: #ccc;
  font-size: 12rem;
  height: 100%;
  width: 100%;
  text-align: center;
}

.arrow-next {
  transition: transform 1s ease;
}

.content {
  cursor: pointer;
}

.content:hover {
  color: #aaa;
}

.content:hover .arrow-next {
  transform: translateX(10%);
}
<div class="container">
      <div class="content">
        <div class="title">START</div>
        <a class="arrow-next" href="#">➜</a>
      </div>
    </div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
aetrnm
  • 402
  • 3
  • 13
  • 1
    I'm out of close votes for the day, but this is a duplicate of https://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements - I will close this later. tl;dr you need to make the `a` element a block element, e.g. apply `display: block` to it. – TylerH Aug 02 '21 at 19:16
  • @TylerH, thanks! That's it!!! – aetrnm Aug 02 '21 at 19:37

0 Answers0