ul下面n个li，用伪类：before和：after，始终只显示一个样式，求解

Question

做优惠券展示 想让优惠券2侧都有锯齿效果，但始终显示一侧有，如图

源代码

.custom-coupon {padding: 10px;font-size: 0;clear:both;}
.custom-coupon li{width:30%;display:block; margin-top:6px; float:left; text-align:center; margin-left: 6px; height: 67px; position:relative;}
.custom-coupon li:after{display:block; content:"" ; width:6px; height:67px; top:0; right:0; position:absolute;background:url(${pageContext.request.contextPath}/images/tradeincar-left.png);}
.custom-coupon li:before{display:block; content:"" ; width:6px; height:67px;top:0; left:0; position:absolute;background:url(${pageContext.request.contextPath}/images/tradeincar-right.png);}

<ul class="custom-coupon">
                    <c:forEach items="${requestScope.tradeincardInfoList}" var="tradeincardInfo" varStatus="status">
                    
                           
                             <li>
                                  <a href="javascript:" onclick="skipInCardList('${tradeincardInfo.tradeincardCode}')">
                                      <div class="custom-coupon-price">
                                          <span class="am-text-default">￥</span>${tradeincardInfo.tradeincardEndPriceInt}
                                      </div>
                                      <c:if test="${tradeincardInfo.isLimit eq 0}">
                                           <div class="custom-coupon-desc">满${tradeincardInfo.tradeincardLimitPrice}元</div>
                                       </c:if>
                                       <c:if test="${tradeincardInfo.isLimit eq 1}">
                                        <div class="custom-coupon-desc">无限制</div>
                                    </c:if>
                                </a>
                             </li>


                    </c:forEach>
                </ul>

伪类总是有一个没出效果，求解。。。

Answer 1

看看li的父元素里有没有overflow:hidden;的元素，目测是被这个属性隐藏掉了。
不然你就把稍微完整点的结构和样式放出来，目前给到的信息不够全。