title: CSS shape (square) before heading
body: <p>I am trying to put a responsive css made square before the  tag. Something like this
  <img src="https://i.stack.imgur.com/oQowm.png" alt="enter image description here"></p>
  
  <p>I've been trying to do it like this, but I can't seem to get the square to appear. Could you please help me out with this one.</p>
  
  <pre><code>h1::before {
  position: relative;
  width: 25%;
  padding-bottom: 25%;
  overflow: hidden;
  background: red;
  }
  </code></pre>
  
  <p>Thank you for your answers!</p>