Databases
StackOverflow2013
Postsdbo
POCSS Building a navigation bar using :before and :after inserting bracket image but :before bracket missing
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Building a navigation bar using :before and :after inserting bracket image but :before bracket missing
    text
    copied!<p>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</p> <pre><code>[ Button 1 ] button 2 button 3 button 4 </code></pre> <p>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 <strong>position: relative</strong> as below</p> <pre><code>#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; } </code></pre> <p>But this causes the navigation to ‘<strong>bounce</strong>’ , button moves to the right when hovered over. I changed this and used <strong>position: absolute</strong> which works, however the brackets display over the text (narrow) . To spread them apart a bit, I’ve added <strong>left: 0.5px</strong> for <strong>:before</strong> and <strong>right: 0.5px</strong> for <strong>:after</strong> 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).</p> <pre><code> button 1 ][ button 2 ][ button 3 ][ button 4 ] </code></pre> <p>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 <strong>1.5em</strong> to <strong>2em</strong> but the brakets followed, and the appearance stayed the same</p> <pre><code>#np-access a { color: #5F5B5B; display: block; line-height: 3.333em; padding: 0 1.5em; text-decoration: none; } </code></pre> <p>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</p> <pre><code>#np-access .current-menu-item &gt; a:after, #np-access .current-menu-ancestor &gt; a:after, #np-access .current_page_item &gt; a:after, #np-access .current_page_ancestor &gt; a:after { content: url(images/bracket-right.png); position:absolute; right: 0.5px; top: 10px; } #np-access .current-menu-item &gt; a:before, #np-access .current-menu-ancestor &gt; a:before, #np-access .current_page_item &gt; a:before, #np-access .current_page_ancestor &gt; 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></pre> <p>}</p> <h1>code which now works</h1> <pre><code>#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; } </code></pre> <p>Thanks dagfr!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload