How to CSS border spacing (or) padding background image separately?

Tags: css,wordpress,menu,navigation,background-image

Problem :

My Wordpress (TwentyTwelve) nav menu works great, but with design I would like to do this, but can't ;

  • no background to the navigation (clear, we see page background) = done
  • li a border-right 1px solid = done
  • li a hover background image, no repeat, bottom center = done

So the problem is : my bg image is way too close to my nav text... but if I add padding or line-height, then the border-right gets too long.

So How can I add spacing under my nav text, so that my bg image (hover) gets lower, but without the right-border line getting longer ?

See my CSS code if it helps


.main-navigation li a {
color: #fff;
line-height: 1.0;
text-transform: uppercase;
white-space: nowrap;
padding:0 15px 10px 15px; 
border-right:#8fbf3d 1px solid;

.main-navigation li a:hover {
color: #fff;
background:url('') no-repeat bottom center;

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #8fbf3d;
font-weight: bold;
background:url('') no-repeat bottom center;


Solution :

still not found that magic way to do this... but I found an alternative that could work

  • deleted the right-border
  • added a background image looking like a right-border line (but its a jpeg) and put it align right
  • added my previous padding-bottom


    CSS Howto..

    How do I refactor my CSS? [duplicate]

    Textarea doesn't show newline in IE

    Hide and show when click a button

    HTML/CSS showing buttons online and auto going to next line

    HTML CSS - How to put button at the center of my page

    How to horizontally center text in bootstrap button?

    how to change negative sign position css

    AngularJS - how to show an alert when the length of an array is zero and hide the default behavior?

    How to to change CSS double class properties through script

    How do I use CSS transitions to fixed position a scaled element?

    css how to make the button in the middle of this code [closed]

    How to select nth child with css? [duplicate]

    How to remove dotted border around active hyperlinks in IE8 with CSS

    How can I enqueue Internet Explorer specific stylesheets in the Wordpress functions folder?

    How to set css style dynamically with angularjs?

    how to set css width equal to length of longest text

    How to mix url string & attribute value in CSS content property? [duplicate]

    How to put text on top of a pattern overlay CSS

    How can I wrap a page with a centered DIV?

    How to separate form with horizontal line

    Slideshow by changing background-image CSS attribute using JQuery in Drupal 7

    How to change css elements in HAML dependent on what page is calling for the content?

    How to float 3 LI's to the left and 3 to the right and maintain original sequence?

    how to properly override CSS in external file

    How are multiple spaces showing in HTML, without pre, nbsp or white-space: pre?

    How to apply custom CSS to Angular Material md-contact-chips

    How to center a single character both vertically and horizontally in a square div

    How come one jquery script cant effect another jquery script

    How do I create an oval around text in CSS?

    How to style Select2 input tags with css and how to limit them