How to rotate something inside an a tag with CSS

Asked Apr 15 '20 at 22:22

Active Apr 15 '20 at 22:23

Viewed 14 times

I cannot make a rotation work inside an <a href=""></a> tag.

I have this for example:

.rt {
  -webkit-transition: -webkit-transform .4s ease-in-out;
  transition: transform .4s ease-in-out;
}

.rt:hover {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

<a class="btn btn-link ml-auto">SING UP <span class="rt">/</span> ENTER</a>

But nothing happens to the forwards slash. I can add .rt to the a tag but I only want the forwards slash to rotate.

edited Apr 15 '20 at 22:23

doğukan

23,073
13
57
69

asked Apr 15 '20 at 22:22

Mark

Did you try to change the span to a div? – EdgarAlexPoe Apr 15 '20 at 22:28
Tried that, but then only works when you hover over the forward slash – Mark Apr 15 '20 at 22:30
1

try `a.ml-auto:hover .rt{ rotate css}` and that should help that – EdgarAlexPoe Apr 15 '20 at 22:42
It does work by adding `display: inline-block;` but then only when hovering over the forward slash – Mark Apr 15 '20 at 22:45
@EdgarAlexPoe yep! that did the trick with adding `display: inline-block;` – Mark Apr 15 '20 at 22:48
Sweet. Glad you got it worked out – EdgarAlexPoe Apr 15 '20 at 22:58

How to rotate something inside an a tag with CSS

0 Answers0