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

但这会导致导航“反弹”，将按钮悬停在上方时会向右移动。 我改变了这一点，使用了position:absolute，但括号显示在文本上方（窄）。为了将它们分开一点，我为添加了左：0.5px：前和右：0.5px：后这两个选项有效，但第一个括号缺失，其他括号看起来正常，但太近，即按钮2右括号与按钮3左括号太近（无填充），但它们功能正确（下面的示例）

为了尝试向括号中添加一些填充（按钮2右括号太靠近按钮3左括号），我将锚属性的填充从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;

}

现在有效的代码

---

谢谢你，达格

左-0.5px导致第一个括号超出页面

---

为什么没有左：0右：0 on:before和：after，但在#np access a:hover中添加了一个padding-like padding:0 3px

你可能错过了位置：相对；对于银行的#np访问权限，dmi3y增加了位置：相对于#np访问权限a，但左放恐怕没有什么区别：0px；它们都显示了，但在括号未显示之前先显示，有什么想法吗？嗨，谢谢你的帮助@dagfr按照建议做了，但括号到处都是，我去掉了填充物，放在左边：0px；并保留了其余部分，但左括号中仍然没有显示？？我已经尝试更改了您建议的dagfr的一部分，并且我已设法使其正常工作，您的建议是正确的；）请看我添加了什么，以使其与您的建议一起工作！！请参阅上面修改的代码，谢谢

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