如何在悬停时旋转字体 - 真棒图标而不旋转文本？

Question

我正在练习HTML并遇到问题。
首先，我的代码：

 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> 

当我将鼠标悬停在图标和文本上时，我想让我的图标旋转，但是当我将鼠标悬停在此代码上时，整个文本都会旋转。 如果不旋转整条生产线，我该如何让我的汽车旋转？ 我必须在此使用javascript吗？

Answer 1

旋转创建图标的伪元素：

 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>