title: Transform widget with CSS :after background-image in a reusable component
body: <p>I have a widget on my front page that I want to use many times but with another background image. I was trying to put another element that could reproduce the behavior from CSS :after but without success. Do you know the best approach for this?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="widget-2 panel no-border bg-primary widget widget-loader-circle-lg no-margin"&gt;
      &lt;div class="panel-body"&gt;
          &lt;div class="pull-bottom bottom-left bottom-right padding-25"&gt;
              &lt;br&gt;
              &lt;h3 class="text-white"&gt;My Title&lt;/h3&gt;
              &lt;p class="text-white hint-text hidden-md"&gt;Lorem Ipsum&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS (less)</p>
  
  <pre><code>.widget-2 {
    &amp;:after {
      background-image: url("@{assets-url}/img/social/person-cropped.jpg");
    }
  }
  </code></pre>
  
  <p>Result
  <a href="http://i.stack.imgur.com/AM68R.png" rel="nofollow">Widget with backgroud-image</a></p>