zaedas99 zaedas99 - 23 days ago 9
CSS Question

How to center character | in a before element

I have been having some trouble lately with an element that's refusing from being styled.

Here is what i'm trying to achieve :

enter image description here
Here is what i have right now :

enter image description here

I have tried to apply various styling elements, like

vertical-align: middle
, some
padding
or some
margin
without much success.

My guess is that it's blocked by it's container and cannot go any "higher" that what the container is.

I'd like to keep this solution (the | in the before element) while having them centered.

Is it possible?

Here's my css / html so far :

CSS :

/**********Header**********/
#head-wrapper{
max-width: 1024px;
margin: 0 auto;
font-size: 14px;
}

.menu_align{
padding-top: 8px;
float: right;
}

nav a + a:before{
content: " | ";
color: rgb(102, 102, 102); /*needed in order to prevent color triggering from hover property of a*/
padding: 0 10px 0 10px;
}


HTML :



<header>
<div id="head-wrapper">
<img src="<?php echo base_url();?>Images/logo.png" alt="Logo">
<nav class="menu_align">
<a href="#">INSIGHT</a>
<a href="#">BUILDINGS</a>
<a href="#">CLIENTS</a>
</nav>
</div>
</header>

Answer

Don't use pseudo elements and the pipe character to split your navigation items. Give a border to the anchors and then remove the border for the first-child:

nav a{
    border-left:1px solid #000;
    color: rgb(102, 102, 102);
    padding: 0 10px 0 10px;
}
nav a:first-child{
    border-left:0;
}

JSFiddle


The above is the most widely-supported option, however there are others, that will only work in newer (IE9+) browsers:

nav a:not(:first-child){
    border-left:1px solid #000;
    color: rgb(102, 102, 102);
    padding: 0 10px 0 10px;
}

JSFiddle