title: Display 'SALE' tag before an image
body: <p>I am looking to display a 'SALE' tag just before an image, I have tried to do this using the 'before' pseudo element however nothing seems to be displaying on the screen.</p>
  
  <p>I am trying to create the 'SALE' tag inside a circle with black background.</p>
  
  <p>Below is the code that I have used</p>
  
  <pre><code>&lt;span class"bag-image"&gt;
    &lt;img src="https://images-na.ssl-images- 
  amazon.com/images/I/71lDa7EbWSL._UY395_.jpg" class="image"&gt;
  &lt;/span&gt;
  
  .bag-image::before{
  
  background-color: #red;
  content: 'SALE';
  border-radius: 500px;
  display: inline-block;
  width: 100px;
  height: 100px;
  
  }
  </code></pre>
  
  <p>For visual reference:</p>
  
  <p><a href="https://i.stack.imgur.com/aP5LQ.png" rel="nofollow noreferrer">LIKE THIS</a></p>
  
  <p><a href="https://codepen.io/anon/pen/rgLPdp" rel="nofollow noreferrer">https://codepen.io/anon/pen/rgLPdp</a></p>