CSS3 伪类实现特定菜单答案

【问题标题】：CSS3 Pseudo-classes to realize a specific menuCSS3 伪类实现特定菜单
【发布时间】：2015-03-03 09:53:50
【问题描述】：

我有以下菜单和抄送，但它不会运行来获取以下菜单？！分隔符没有来自文本的链接。

文本 1 |正文 2 |文本 3

ul.tabs > li.hasmore .font_menue::after {
  content: ' | ';
}

ul.tabs > li.hasmore .font_menue:last-child::after {
  content: '';
}


<div id="navigation">
    <ul class="tabs">
      <li class="hasmore">
        <a href="text1.php"><span class="font_menue">TEXT 1</span></a>
      </li>
      <li class="hasmore">
        <a href="text2.php"><span class="font_menue">TEXT 2</span></a>
      </li>
      <li class="hasmore">
        <a href="text3.php"><span class="font_menue">TEXT 3</span></a>
      </li>
    </ul>
</div>

【问题讨论】：

标签： css separator

【解决方案1】：

ul {
    list-style: none;
}
li {
    float: left;
    margin-right: 5px;
}
ul.tabs > li.hasmore::after {
   content: ' | ';
}

在这里查看演示 http://jsfiddle.net/rLz7b78z/

【讨论】：

【解决方案2】：

只需添加以下css：

li:after{
    content: ' | ';
}

li{
    list-style: none;
    display: inline;
}

检查Fiddle。

【讨论】：

【解决方案3】：

ul {
    list-style: none;
}
li {
    float: left;
    margin-right: 5px;
}
ul.tabs > li.hasmore::after {
  content: ' | ';
}

ul.tabs > li.hasmore:last-child::after {
  content: '';
}

THX，这很好:)

【讨论】：