Question

I am building a navigation bar and need to have a bracket inserted before the button and after the button to highlight the button when hovered and selected as below example

[  Button 1  ]    button 2    button 3    button 4

I am using an image for the bracket width=7px height=30px. My CSS is limited and I’m teaching myself! I have managed to get it all to work if I use position: relative as below

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

But this causes the navigation to ‘bounce’ , button moves to the right when hovered over.
I changed this and used position: absolute which works, however the brackets display over the text (narrow) . To spread them apart a bit, I’ve added left: 0.5px for :before and right: 0.5px for :after which works, but the first bracket is missing and the others appear ok but are too close ie button 2 right bracket is too close to button 3 left bracket (no padding), but they function correctly (example below).

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

To try and add some padding to the brackets (button 2 right bracket too close to button 3 left bracket) I increased the padding for the anchor attribute from 1.5em to 2em but the brakets followed, and the appearance stayed the same

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


}

Why is the first bracket missing when using position absolute? And how do I add padding? Hope someone can offer an explanation as to where I am going wrong! Thanks in advance my CSS is below

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

}

code which now works

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

Thanks dagfr!

Answer 1

The -0.5px left cause the first bracket to be out of the page.

Why don’t have left:0 right:0 on :before and :after but a padding added to #np-access a:hover like padding: 0 3px; ??