javascript - 根据移动设备拉伸(stretch)分隔图像

Question

我有一个导航菜单，我在每 li 之后添加一个分隔图像使用 :after 和 :before。

但我无法让它根据移动设备进行响应。

请看fiddle

图像最初不是从左侧开始的，并且根据设备宽度没有响应。

HTML

<ul class="menu-nav-toggle">
    <li><a href="/pages/about">About us</a></li>
    <li><a href="/pages/faq">Faqs</a></li>
    <li><a href="/pages/contact">Contact Us</a></li>
    <li><a href="/pages/myaccount">My Account</a></li>
    <li><a href="/pages/cart">My cart</a></li>
    <li><a href="step1">Step</a></li>
    <li><a href="/pages/offers">Offers</a></li>
<ul>

CSS

   .menu-nav-toggle li:first-child:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 5px;
      display: inline-block;
      background-position: center;
      background-image: url(http://i.imgur.com/4jJVvVX.png);
      background-repeat:no-repeat;
      top: 0;
      }

   .menu-nav-toggle li:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 5px;
      display: inline-block;
      background-position: center;
      background-image: url(http://i.imgur.com/4jJVvVX.png);
      background-repeat:no-repeat;
      bottom: 0;
      left: 0;
      }

请帮忙。

Answer 1

你期待这样吗。

演示:http://jsfiddle.net/rekxgcq9/3/

      .menu-nav-toggle li:first-child:before { background-position:left;}
      .menu-nav-toggle li:after{background-position:left;}