[nick2price]

Hi guys. I have added a menu to my site using a Wordpress plugin. When I add a border, it messes the menu up because it increases the width of the columns, and they no longer fit on the one line. I spoke to the developer, and he advised that I used pseudo elements to draw my dividers. At the moment I have

#nav_menu-3,
#nav_menu-4,
#nav_menu-5,
#nav_menu-6,
#text-7,
#text-12{
	border-left:1px solid #4E4E64!important;
}

Does anyone know what he means to use pseudo elements to draw my dividers? I did try the following without success

#nav_menu-3:before,
#nav_menu-4:before,
#nav_menu-5:before,
#nav_menu-6:before,
#text-7:before,
#text-12:before{
	border-left:1px solid #4E4E64!important;
}

Cheers

Nick

[ahmad_511]

Hi,
the pseudo you added must is applicable in presence of the content property and it's used to insert contents before targeted element
something like this

p:before{
    content:"Try to ";
    color:red;
}

<p>read carefully</p>
<p>understand why you do this</p>

applying this will insert "Try to " string before the content of each P element and in red

so, I'm not sure if the developer meant to use this pseudo in specific
posting the html and related css will give us a better view about the menu structure so we can see how the css should be adjusted to achieve required result

anyway, if the border is what messes the menu up, try to use outline property instead as it will not occupy a space (but depending on your current style it maybe not work for you)

[Lazy Vulpes]

You can also use a border and give it a negative padding equal to the border width.