悬停时在右侧元素列表上添加图像

Question

我有一个项目列表和一个箭头图像。

<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<div class="arrow">
<img src="./assets/images/Arrow.svg">
</div>
</ul>

悬停时，如何使箭头图像显示在li元素的右侧。

Answer 1

使用li:hover::after在悬停时添加图像。

ul{
list-style-type: none;
}
li{
font-size: 34px;
position: relative;
width: max-content;
}
li:hover{
cursor:pointer;
font-size: 35px;
transition: all 100ms ease-in;
}
li:hover::after{
position:absolute;
content: ">"; /* add url('img_url here') */
left: calc(100% + 10px);
}

<ul>
<li>list option : A</li>
<li>list option : B</li>
<li>list option : C</li>
<li>list option : D</li>
</ul>