html - 无法在 li 伪元素上创建框阴影

Question

我想在图像上创建一个盒子阴影，但不知何故我无法创建一个。我正在使用 :after 伪元素来做到这一点:

HTML::

<ul class="bxslider fade out">
    <li>
        <img src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" />
    </li>
</ul>

CSS::

  .bxslider {
      margin: 0;
      padding: 0;
  }
  .bxslider li {
      position: relative;
  }
  .bxslider li:after {
      width: 100%;
      height: 30px;
      ;
      position: absolute;
      top:100%;
      left: 0;
      -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
      box-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
  }
  .bxslider li img {
      width: 100%;
      max-width: 300px;
  }

FIDDLE HERE

现在当然因为 img 不支持伪元素我将阴影添加到 li 元素，但我仍然看不到阴影，我不明白为什么？

谁能解释一下？同样在 FF 的控制台中，没有显示任何伪元素。

附言我使用伪元素的原因是因为 box-shadow 必须小于 li 宽度的 100%，但目前，没有考虑到这一点。

Answer 1

尝试使用以下选择器 .bxslider li img:hover 为阴影添加 CSS。

http://jsfiddle.net/cxy39rLg/1/

 .bxslider li img {
    width: 100%;
    max-width: 300px;
}
.bxslider li img:hover {
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}