CODEWITHSUNDEEP
htmlcsscss-selectors
Zabs
Zabs

Reputation: 14142

Use CSS to get a seperator on the last item in a menu

I am trying to display a | seperator within the list menu for each list item except the last one, as it is dynamically generated using a Yii component i'd need to do this via CSS.

I tried using this snippet but had no joy:

#mainmenu li:last-child:after {
  content: "|";
}; }

I want it to look so it shows the seperator like this:

Home | About Us | What We Do | Contact Us

Here is my HTML code, please note I am using the Skeleton CSS framework 1.1 too (legacy I know).

<nav class="action-bar row">
    <div>
        <ul id="mainmenu" class="container menu">
            <li class="home active first"><a href="/">Home</a></li>
            <li><a href="/about">About Us</a></li>
            <li><a href="/whatwedo">What We Do</a></li>
            <li class="last">
                <a href="/contact">Contact Us</a>
            </li>
        </ul>
    </div>
</nav>

My CSS:

#mainmenu {
 height: 17px;
 border-bottom: 1px dotted #ACBBCB;
 padding-top: 5px;
}

.header .action-bar {
 font-weight: normal;
 font-size: 13px;
 overflow: hidden;
 padding: 0px;
}

.header .action-bar.buddy-padding {
 margin-bottom: 0;
}

.header .action-bar .menu {
 margin: 0 auto;
}

.header .action-bar .menu li {
 display:inline-block;
 line-height: normal;
 padding-right: 7px;
}

.header .action-bar .menu li a {
 text-decoration: none;
 color: #000;
 display: block;
}

.header .action-bar .menu li.active {
 text-decoration: underline;
}

Upvotes: 1

Views: 141

Answers (5)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Well a quick hack - However you have class attached to your last element, you can just make its :after content empty as below:

#mainmenu li:after {
  content: "|";
}

#mainmenu .last:after{
  content:"";
}
<nav class="action-bar row">
  <div>
    <ul id="mainmenu" class="container menu">
      <li class="home active first"><a href="/">Home</a></li>
      <li><a href="/about">About Us</a></li>
      <li><a href="/whatwedo">What We Do</a></li>
      <li class="last">
        <a href="/contact">Contact Us</a>
      </li>
    </ul>
  </div>
</nav>

Upvotes: 2

Danield
Danield

Reputation: 125443

Here's another way:

#mainmenu li + li:before {
    content: '|';
    display:inline-block;
    padding: 0 6px;
}

FIDDLE

This adds the pipe before each list item - starting from the second item.

Using this method - no 'last' classes or last-child pseudo selectors are necessary.

#mainmenu {
  height: 17px;
  border-bottom: 1px dotted #ACBBCB;
  padding-bottom: 5px;
}
.action-bar .menu li {
  display: inline-block;
  line-height: normal;
}
.action-bar .menu li a {
  text-decoration: none;
  color: #000;
  display: inline-block;
}
#mainmenu li + li:before {
  content: '|';
  display: inline-block;
  padding: 0 6px;
}
<nav class="action-bar row">
  <div>
    <ul id="mainmenu" class="container menu">
      <li class="home active first"><a href="/">Home</a>
      </li>
      <li><a href="/about">About Us</a>
      </li>
      <li><a href="/whatwedo">What We Do</a>
      </li>
      <li class="last">
        <a href="/contact">Contact Us</a>
      </li>
    </ul>
  </div>
</nav>

Upvotes: 2

Pankaj Ladhar
Pankaj Ladhar

Reputation: 155

#mainmenu li:after {
  content: "|";
}
#mainmenu .last:after{
    content:"";
}

Upvotes: 1

Kurt Serge
Kurt Serge

Reputation: 301

This works:

#mainmenu li:not(:last-child):after {
    content:"|";
}

Upvotes: 1

glend
glend

Reputation: 1622

Drop the :last-child then null the last-child;

#mainmenu li:after {
  content: "|";
}
#mainmenu li:last-child:after {
  content: "";
}

Upvotes: 1

Related Questions