css - CSS使用:before和:after插入方括号图像，但缺少:before方括号来构建导航栏

我正在构建一个导航栏，需要在按钮之前和按钮之后插入一个支架，以便在悬停和选择时突出显示按钮，如下例所示

[  Button 1  ]    button 2    button 3    button 4

我使用的图像的支架宽度= 7px高度= 30px。我的CSS受限制，我正在自学！如果我使用position：relative，我设法使所有工作正常进行，如下所示

#np-access a:hover:before{
  content: url(images/bracket-left.png);
  position:relative;
  top: 10px;
}

#np-access a:hover:after {
   content: url(images/bracket-right.png);
   position:relative;
   top: 10px;
}

但这会使导航“跳动”，将鼠标悬停在该按钮上时，按钮会向右移动。
我更改了此位置并使用了它的位置：绝对有效，但是括号显示在文本上（窄）。为了将它们分开，我添加了：before的left：0.5px和：after的right：0.5px，这是可行的，但是第一个括号丢失了，而其他看起来还不错，但是太近了，即按钮2的右括号是距离按钮3左括号太近（无填充），但它们功能正常（以下示例）。

   button 1  ][   button 2   ][  button 3  ][  button 4  ]

尝试在方括号中添加一些填充（按钮2的右括号与按钮3的左括号太近），我将anchor属性的填充从1.5em增加到2em，但紧接着是刹车，外观保持不变

#np-access a {
color: #5F5B5B;
display: block;
line-height: 3.333em;
padding: 0 1.5em;
text-decoration: none;


}

为什么使用绝对位置时缺少第一个括号？以及如何添加填充？希望有人能对我要去哪里做一个解释！预先感谢我的CSS在下面

#np-access .current-menu-item > a:after,
#np-access .current-menu-ancestor > a:after,
#np-access .current_page_item > a:after,
#np-access .current_page_ancestor > a:after {
 content: url(images/bracket-right.png);
 position:absolute;
 right: 0.5px;
 top: 10px;
}

#np-access .current-menu-item > a:before,
#np-access .current-menu-ancestor > a:before,
#np-access .current_page_item > a:before,
#np-access .current_page_ancestor > a:before {
     content: url(images/bracket-left.png);
     position:absolute;
     left: -0.5px;
     top: 10px;
}


#np-access a:hover:before{
    content: url(images/bracket-left.png);
    position:absolute;
    left: -0.5px;
    top: 10px;
}

#np-access a:hover:after {
    content: url(images/bracket-right.png);
    position:absolute;
    right: 0.5px;
    top: 10px;

}

现在可以工作的代码

#np-access a:hover:before{
   content: url(images/bracket-left.png);
    position:absolute;
    left: 1px;
    top: 10px;
    padding: 0 10px;
 }

 #np-access a:hover:after {
    content: url(images/bracket-right.png);
    position:absolute;
    right: 0.5px;
    top: 10px;
    padding: 0 10px;
  }

谢谢dagfr！

最佳答案

左-0.5px导致第一个括号不在页面内。

为什么在：before和：after上没有左：0右：0，但是在＃np-access a：hover上添加了填充，就像填充：0 3px; ??

关于css - CSS使用:before和:after插入方括号图像，但缺少:before方括号来构建导航栏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13941910/