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!