Animate ::before and ::after

Question

I searched ::before and ::after up, and I understand that HTML is not rendered inside of the pseudo-elements. I have a Unicode character(Ξ) before and after a certain text element, and I would like to animate them, and only those characters. Is there a trick to inserting HTML elements into ::before and ::after elements or animating only those elements? Or should I just separately insert them into the code and animate them separately?

My current code:

.side div h2::before {
  content: "Ξ";
  animation: spin 3s infinite;
}

.side h2::after {
  content: "Ξ";
  animation: spin 3s infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="side">
  <div style="height:100%;">
    <h2>Navigation</h2>
  </div>
</div>

@Daniel_Knights I tried to, but rotation(what I intend to do) does not seem to work. — pythonian 23, Sep 20 '20 at 09:02
Reset display to inline-block for the pseudo.transform Will then work — G-Cyrillus, Sep 20 '20 at 09:16

score 2 · Accepted Answer · answered Sep 20 '20 at 09:14

Use display: inline-block for transform: rotate to work on ::before and ::after:

div::before,
div::after {
  content: "Ξ";
  display: inline-block;
  animation: spin 1s infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(-360deg);
  }
}

<div>TEST</div>

Or, display: block if you want some madness:

div::before,
div::after {
  content: "Ξ";
  display: block;
  animation: spin 1s infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(-360deg);
  }
}

<div>TEST</div>

Animate ::before and ::after

1 Answers1