css - responsive image using the after selector -
i'm wondering if can make image inserted :after
responsive.
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 </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; }
i tried add max-width:100%; height:auto;
doesn't work either.
can point me in right direction?
thanks!
Comments
Post a Comment