我有一系列类值设置为：text-xs list-group-item list-group-item-action p-1的href。这些链接封装在div中，类值设置为：list-group
<div class='list-group'>
<a href='#' class='text-xs list-group-item list-group-item-action p-1'>Text 1</a>
<a href='#' class='text-xs list-group-item list-group-item-action p-1'>Text 2</a>
<a href='#' class='text-xs list-group-item list-group-item-action p-1'>Text 3</a>
<a href='#' class='text-xs list-group-item list-group-item-action p-1'>Text 4</a>
</div>
当我将鼠标悬停在其中一个链接上时，我想在列表项的右侧显示一个字体很棒的图标("as fa brain"(，这样，如果你点击该图标，你将转到与点击列表项中其他任何地方不同的目的地。
我怀疑这可能不可能只使用一系列href(因为我认为不可能在href中嵌入href(，但我不知道如何重组它。
希望这能对您有所帮助。
更新
我刚刚在.list-group li选择器中添加了list-style-type: none;以删除项目符号。
.list-group li{
position: relative;
list-style-type: none;
}
.fas.brain_icon{
position: absolute;
right: 10px;
top: 7px;
display: none;
}
.list-group li a.list-group-item:hover + .fas.brain_icon, .fas.brain_icon:hover{
display: block;
}
.list-group .list-group-item-action:hover{
z-index: 0;
}<!-- font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<ul class='list-group'>
<li><a href='#' class='text-xs list-group-item list-group-item-action p-1'>Text 1</a>
<a href="" class="brain_icon fas fa-brain"></a>
</li>
<li><a href='#' class='text-xs list-group-item list-group-item-action p-1'>Text 2</a>
<a href="" class="brain_icon fas fa-brain"></a>
</li>
<li><a href='#' class='text-xs list-group-item list-group-item-action p-1'>Text 3</a>
<a href="" class="brain_icon fas fa-brain"></a>
</li>
<li><a href='#' class='text-xs list-group-item list-group-item-action p-1'>Text 4</a>
<a href="" class="brain_icon fas fa-brain"></a>
</li>
</ul>