Why wouldn't these arrows rotate?

Question

I want to rotate the arrows on x-axis, added by the::before pseudo-element when the link is active. I have tried using keyframes and googled for some solution but failed to get any in this case. Below are the HTML and CSS for what I have tried.

.nav {
  list-style: none;
}

.side:link,
.side:visited {
  color: #0018d1;
  font-size: 24px;
  text-decoration: none;
}

.side::before {
  content: "\21d2";
  animation: rotate 0.1s infinite;
}

@keyframes rotate {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-90deg);
  }
}

<div class="sidenav">
  <div class="profile-pic"></div>
  <nav class="sidenav-container">
    <ul class="nav sidenav-list">
      <li><a class="side nav-link" href="#About">About</a></li>
      <li><a class="side nav-link" href="#Skills">Resume</a></li>
      <li><a class="side nav-link" href="#projects">projects</a></li>
      <li><a class="side nav-link" href="#contact">Contact</a></li>
    </ul>
  </nav>
</div>

score 3 · Accepted Answer · answered Sep 21 '22 at 15:52

You need to add display: inline-block to your ::before

.nav {
  list-style: none;
}

.side:link,
.side:visited {
  color: #0018d1;
  font-size: 24px;
  text-decoration: none;
}

.side::before {
  content: "\21d2";
  animation: rotate 0.1s infinite;
  display: inline-block;
}

@keyframes rotate {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-90deg);
  }
}

<div class="sidenav">
  <div class="profile-pic"></div>
  <nav class="sidenav-container">
    <ul class="nav sidenav-list">
      <li><a class="side nav-link" href="#About">About</a></li>
      <li><a class="side nav-link" href="#Skills">Resume</a></li>
      <li><a class="side nav-link" href="#projects">projects</a></li>
      <li><a class="side nav-link" href="#contact">Contact</a></li>
    </ul>
  </nav>
</div>

Why wouldn't these arrows rotate?

1 Answers1