CSS 使用 :before 和 :after 插入括号图像但 :before 括号丢失构建导航栏

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

但这会导致导航“bounce”，当鼠标悬停时按钮会向右移动。 我改变了这一点并使用了 position: absolute ，它可以工作，但是括号显示在文本 (narrow) 上。为了将它们分开一点，我为 :before 添加了 left: 0.5px 并为 :after 添加了 right: 0.5px 可行，但第一个括号丢失，其他括号看起来不错，但太近了，即按钮 2 右括号太靠近按钮 3 左括号（无填充），但它们可以正常工作（下面的示例）。

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

为了尝试在括号中添加一些填充（按钮 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;

}

现在可以工作的代码

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

谢谢你！

Answer 1

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

为什么在 :before 和 :after 上没有 left:0 right:0 而是在 #np-access a:hover 中添加了一个 padding: 0 3px; ??