.handle-remove icon shouldn't move and jump, why my CSS is not working as expected :(
li {
position: relative;
display: block;
float: left;
margin: 10px;
list-style: none;
width: 100px;
}
.handle-remove {
font-size: 14px;
position: absolute;
margin-top: 10px;
margin-left: -20px;
/* display: none; */
}
li:hover .handle-remove {
display: block;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
</head>
<body>
<div>
<ul>
<li>
<img src="https://dummyimage.com/100x100/333/fff" />
<a href="#" class="handle-remove"><i class="fa fa-trash"></i></a>
</li>
<li>
<img src="https://dummyimage.com/100x100/333/fff" />
<a href="#" class="handle-remove"><i class="fa fa-trash"></i></a>
</li>
</ul>
</div>
</body>
</html>