有没有办法旋转链接上的悬停高亮显示?(不是元素)

Question

如果这是一个愚蠢的问题，我很抱歉，但我想看看悬停时是否可以旋转链接上的高亮显示？

所以，我的css/html设置如下：

.links {
display: block;
}
.links a {
color: #000000;
text-decoration: none;
display: inline;
width: 150px;
box-shadow: inset 0 0 0 0 #000;
overflow: visible;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
transition: all ease 0.5s;
}
.links a:hover {
display: inline-block;
transform: rotate(20deg);
color: #FFFFFF;
text-decoration: none;
box-shadow: inset 0 50px 0 0 #ea1a00;
}

<div class="links">
<a href="example.com">
<span>Link example</span>
</a>
</div>

(编辑自teaclub.crd.co(
我的目标是拥有它，这样当链接悬停在上面时，红色高亮显示(而不是文本(会旋转一定的量？

我尝试过transform:rotate函数，但它总是应用于文本，我不确定是否有方法将它们分离。

提前谢谢！

Answer 1

试试这个：

.links {
display: block;
width: 100px;
}
.links a {
color: #000000;
text-decoration: none;
display: inline;
width: 150px;
box-shadow: inset 0 0 0 0 #000;
overflow: visible;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
transition: all ease 0.5s;
}
.links a:hover .rotate {
opacity: 1;
transform: rotate(45deg);
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
transition: all ease 0.5s;
}
.rotate {
opacity: 0;
position: absolute;
background: red;
width: 100px;
height: 20px;
top: 8px;
left: 6px;
z-index: -2;
}

<div class="links">
<a href="example.com"><span style="font-family: 'Arsenal', sans-serif;">Link example</span>
<span class="rotate"></span></a>
</div>