Html CSS突出显示带有自定义边框的链接

我需要一点帮助来解决我的问题。我使用此代码获得以下效果：

#navLink{
font-family: oduda_bold;
font-size: 17px;
color: #fff;
text-decoration: none;
}
#navLink:focus{
border-radius: 10px;
border-style: solid;
border-width: 0px;
background-color: #ef5e99;
}

我想把它突出显示如下：

---

可以突出显示大于其文本值区域的链接吗？

可以。添加填充，然后摆弄边界半径，直到它满足您的期望：

#navLink:focus{
  padding: 10px /*here*/
  border-radius: 30px;
}

---

您需要使用填充并将链接设置为内联块

#navLink{
  display:inline-block;
  padding: 10px;
}

---

太简单了！我不知道为什么我没有在这里使用padding属性。非常感谢。很高兴能帮上忙！