Menu
I'm practicing html and having problem.
First, my code:
i:hover{
transform: rotate(360deg);
transition: 1s all;
}
i{
transition: 1s all;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-car">This is a car.</i>
</body>
</html>I want to make my icon spin when hovering at icon and text, but when I hover with this code, entire text spins. What should I do to make my car spin without spinning the whole line? Do I have to use javascript in this?
833
asked Oct 19 '25 04:10
Rotate the pseudo-element that create the icon:
i:hover::before {
transform: rotate(360deg);
}
i:before {
display: inline-block;/* mandatory to be able to use transform */
transition: 1s all;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-car">This is a car.</i>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
