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

Question

我的问题需要一点帮助。我用这段代码得到以下效果：

#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;
}

WRONG HIGHLIGHT

我想像这样突出显示它：

NICE HIGHLIGHT

是否可以用更大（大于其文本值）的区域突出显示 link？

Answer 1

是的。添加填充，然后 fiddle 围绕边界半径，直到它符合您的期望：

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

Answer 2

您需要使用填充并将 link 设置为内联块。

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

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

CSS highlight links with custom border

html

css

styling