在我的页脚链接wordpress中添加“/”字符

Question

我需要一些帮助。我坚持在我的wordpress二级链接菜单的页脚链接中添加“/”。我想在<div id="footer-right">的导航中添加“/”。我正在使用wordpress。

这是我的页脚代码：

<div class="footer">
        <section id="footer">
            <div id="footer-left">
            <ul id="copyright">
                <br>
                <li>Copyright &copy; JCJOHN. </li>
                <li>Designed by: <a href="">JC</a></li>
            </ul>
            </div>

            <div id="footer-right">
            <br>
            <?php wp_nav_menu(array('theme_location' => 'secondary')); ?>
            </div>
        </section>

    </div>

这是我的css：

#footer-left {
     float:left;
}
#footer-right {
     float:right;
     margin-right: 18px;
}
#footer-left,#footer-right li {
    clear:both;
}
#footer-right ul {
    list-style-type: none;
    margin: 8px 5px;

}
#footer-right li {
    display: inline;
    margin: 5px;
}
#footer-right ul.sf-menu li:after {
    content: "/" !important;
    float: right;
}

当我在我的CSS中添加#footer-right ul.sf-menu li:after时，它也会输出到nothhing中。请帮忙。

Answer 1

您可以使用display:inline-block代替float:right并提供一些left/right margin

备注

• 避免使用!important
• ul只能让li有直接后代，因此请移除/重新排列br
中的footer-left

#footer-left {
  float: left;
}
#footer-right {
  float: right;
  margin-right: 18px;
}
#footer-left,
#footer-right li {
  clear: both;
}
#footer-right ul {
  list-style-type: none;
  margin: 8px 5px;
}
#footer-right li {
  display: inline;
  margin: 5px;
}
#footer-right ul.sf-menu li:after {
  content: " / ";
  display: inline-block;
  margin: 0 10px;
  color: red
  /* demo */
}

<div class="footer">
  <section id="footer">
    <div id="footer-left">
      <br>
      <ul id="copyright">
        <li>Copyright &copy; JCJOHN.</li>
        <li>Designed by: <a href="">JC</a>
        </li>
      </ul>
    </div>
    <div id="footer-right">
      <br>
      <ul class="sf-menu">
        <li>Copyright &copy; JCJOHN.</li>
        <li>Designed by: <a href="">JC</a>
        </li>
      </ul>
    </div>
  </section>

</div>