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..

    Using a lot of style sheets. Needing opinions on how to move forward efficiently

    How to make space between menu items in CSS/HTML

    How to silently hide “Image not found” icon when src source image is not found

    How to correct css for IE?

    How can I apply CSS to elements created with javascript in IE?

    How to apply nested css using jQuery?

    CSS: How to get thumbnails into a horizontal line?

    How do I wrap and set CSS properties to achieve the depicted results?

    Custom CSS Form: How to achieve responsive underlined textarea?

    How do I create a fallback for the HTML5 search cancel button in webkit?

    How to darken a CSS background image?

    How to create a rounded corner background box using CSS?

    How can I force LESS (css) to recognize a variable?

    How to stop CSS element style from getting into my class style?

    How to place 2 div side by side (alternative solution)

    CSS parser/abstracter? How to convert stylesheet into object

    how would you set up the GUI for a web-based board game structure?

    How to add scroll to child of flex item?

    how to prevent vertical Stepdown

    How do you Add an image to the left side of a div

    Showing divs in th on the same line

    PHP / CSS How to work with themes for my site? [closed]

    How to apply CSS on Unordered List written by JSP tag on web Page

    How to work with dynamic container in Isotope?

    How to get tr:nth-child which has css applied

    How to make cut off in CSS as shown in the attached image?

    How do you have a hidden div appear and change sizes using css or jquery?

    How do I make text and other items look like chalk without a specialized font using only HTML and CSS? [closed]

    How to Make Text Stay Inside Div?

    How to force Google's custom search to be responsive?