导航栏的边框仅限活动类文本

Question

在此图片活跃课程＆＃34;面试经历＆＃34;将显示为＆＃34;问题＆＃34;等标签。

<li class="active">
<a href="ras.php"><i class="fa fa-hourglass-end" ></i>Interview Experiences</a>
</li>

我希望边框仅用于文本，就像问题标签一样。 css设计是

.active
{
 background-color: #e7e7e7;
}

Answer 1

更改您的.active课程，如下所示

.active a {
  border: 1px solid white;
}

Answer 2

或者，如果您想要纯粹围绕链接 - 只需设置链接本身的样式。我猜你在悬停时想要它吗？如果没有，请删除:hover。

HTML：

<a href="#" class="border">

CSS：

a.border:hover {
  border: 1px solid #000;
  padding: 5px;
}

Answer 3

而不是像

那样分配背景

.active
{
    background-color: #e7e7e7;
}

设置边界并以“ a”为目标，并根据需要设置填充。

.active a
{
    border: 1px solid #ffffff;
    padding: 5px;
}