边框底部和悬停的样式显示<a> inside </a> <li> <a>

Question

Here is my three view, I want the border-bottom not just for <a> text but for all border around the tree and same for hover background-color. here is html code for every li
html

<li ng-repeat="node in node.children" class="treebase"
        ng-include="'/_Core/DirectiveCore/Tree/NodeTemplate.html'" ng-show="node.isVisible">
        <a ng-click="c.nodeClicked($event , node)" class="treebase ">
            <span ng-class="node.currentCssClass" href="node.link"></span>
            {{node.text}}
        </a>
</li>

css

ul li a {
    border-bottom: 1px solid #eeeeee;
}

ul li a.treebase:hover {
    text-decoration: none /*!important;*/ ;
    cursor: pointer;
    background-color: #eeeeee;
    display: block;
}

tree

Answer 1

你可以把边框放在li元素上，如果你想要它取整个宽度，因为li元素是一个块。

或者您只需将a更改为显示为块：

ul li a {
    border-bottom: 1px solid #eeeeee;
    display: block;
}

如果a显示为块，则它将在li标签内占据全宽。因此，边框和背景将采用li的宽度。