如何在 zurb foundation 的侧导航中定位用作图标的“：之前”元素？

Question

我在 foundation 的侧边导航栏中添加了一个子菜单，就像在 this 示例中一样，但图标在文本上方。

我的CSS:

.hasChildren:before{
    content: "ba";
    float: left
}
.hasChildren.active:before{
    content: "bc";
}

我的HTML:

<div class="large-4 medium-4 columns menu-wrapper">
    <div class="panel">
        <h4>Menu</h4>
        <ul class="side-nav">
             <li><a href="#">Link 1</a></li>
             <li><a href="#">Link 2</a></li>
             <li><a href="#">Link 3</a></li>
             <li><a href="#">Link 4</a></li>
             <li><a href="#">Link drop</a>
                 <ul class="side-nav">
                     <li><a href="#">Link 1</a></li>
                     <li><a href="#">Link 2</a></li>
                     <li><a href="#">Link 3</a></li>
                     <li><a href="#">Link 4</a></li>
                 </ul>
             </li>
         </ul>
     </div>
</div>

jQuery:

$('.side-nav li:has("ul")').children('ul').hide(); //hide submenu
$('.side-nav li:has("ul")').addClass('hasChildren'); // add class to li ul child
$('.side-nav li:has("ul")').click(function(){
$(this).toggleClass( "active" ) // add active class to clicked menu item
    $(this).children('ul').slideToggle(); //toggle submenu
});

Image describing my problem

My problem on jsFiddle

Answer 1

使用相对定位，像这样：

.hasChildren:before{
    content: "ba";
    float: left;
    position: relative;
    top: 6px;
}
.hasChildren.active:before{
    content: "bc";
}

已更新fiddle：

http://jsfiddle.net/vpoycbzb/1/

如何在 zurb foundation 的侧导航中定位用作图标的“：之前”元素？

How to position ":before" element used as icon in zurb foundation's Side nav?

html

css

zurb-foundation