CSS 使用 :before and :after inserting bracket image but :before bracket missing 构建导航栏

Question

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

[  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 ，但括号显示在文本 (narrow) 上。为了将它们分开一点，我为 :before 添加了 left: 0.5px ，为 :after 添加了 right: 0.5px 这有效，但第一个括号丢失，其他括号看起来正常但太近，即按钮 2 右括号太靠近按钮 3 左括号(无填充)，但它们正常工作(下面的示例)。

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

为了尝试向括号添加一些填充(按钮 2 右括号太靠近按钮 3 左括号)我将 anchor 属性的填充从 1.5em 增加到 2em 但紧随其后的是 brakets，外观保持不变

#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!

Answer 1

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

为什么不在 :before 和 :after 上添加 left:0 right:0 而是将填充添加到 #np-access a:hover like padding: 0 3px; ??