使用后选择器的响应图像

时间:2015-05-12 10:43:43

标签: css responsive-design

我想知道我是否可以使用:after响应来插入图片。

HTML:

<div class="col-md-3 swap-bot main-sidebar sidebar">
    <ul id="shop-sidebar">
       <li id="text-2" class="widget widget_text">
          <h2 class="widgettitle">shop powered by </h2>
       </li>
    </ul>
</div>

CSS:

.sidebar>ul>li {
  background: #fff;
  border: 1px solid #aaa;
  border-bottom-width: 2px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  margin-bottom: 20px !important;
}

.sidebar .widgettitle {
  font-size: 16px;
  font-weight: 700;
  padding: 15px 15px 10px 15px;
  margin-bottom: 0 !important;
  border-bottom: 1px solid #aaa !important;
}

#text-2 h2:after{
    content: url('https://blabla.com/wp-content/uploads/2015/05/small.png');
    display: block;
    padding-top: 10px;
    background-size: contain;
    background-position: center;
}

我还尝试添加max-width:100%; height:auto;,但它也不起作用。

你能指出我正确的方向吗?

谢谢!

0 个答案:

没有答案