html - 列表项周围的边框，包括列表样式类型

Question

当我将鼠标悬停在一个列表项上时，我希望整个区域都有一个边框，包括 list-style-type:square;目前我的边框只能包含列表项中的文本......

感谢您的帮助。

Answer 1

使用 list-style-position 将元素符号放入列表项中:

ul li{
    padding-left:3px;
    list-style-position:inside;
    border:1px solid transparent;
}
ul li:hover{
    border-color:#F00;
}

JSFiddle