试图在WordPress上的每个菜单项之间放置一个分隔符

时间:2016-02-13 06:31:57

标签: php css wordpress menu

我想在我的WordPress菜单上的每个菜单项之间添加一个“//”。唯一一个我不想要的地方显然是最后一个。

示例:

我们的故事//我们的产品//与团队会面//联系我们

我尝试了一些css,但无法让它工作。

我的header.php文件显示:

    <nav id="site-navigation" class="main-navigation" role="navigation">                    
                    <?php 
                            $walker = new rc_scm_walker;
                            wp_nav_menu(array(
                            'theme_location'  => 'main-navigation',
                            'fallback_cb'     => false,
                            'container'       => false,
                            'items_wrap'      => '<ul id="%1$s">%3$s</ul>',
                            'walker'          => $walker
                        ));
                    ?>           
                </nav><!-- #site-navigation -->          

我的导航ID是“网站导航”,类是“主导航”。

谢谢!

1 个答案:

答案 0 :(得分:0)

在不知道所有选择器的情况下,您可以使用伪元素执行以下操作:

.main-navigation li {
  position: relative;
  float: left;
  margin-left: 20px;
  padding-right: 20px;
}

.main-navigation li:after {
  position: absolute;
  top: 0;
  right: 0;
  content: '//';
}

.main-navigation li:last-child:after {
  content: '';
}

https://jsfiddle.net/8eghhh2v/