How to create mirrored image effect with CSS single element
<p>I have an HTML element with a background image and want to create a mirror effect to the bottom, as if the image is reflected like this:</p>

<p><a href="https://i.stack.imgur.com/PP65o.jpg" rel="nofollow"><img src="https://i.stack.imgur.com/PP65o.jpg" alt="Image with mirror"></a></p>

<p>The optimal solution for me to create this reflection would be CSS only without using more elements than this single one and without using the image URL multiple times (due to maintenance reasons). I only found <a href="http://hsrtech.com/css/create-reflection-effect-using-css3/" rel="nofollow">solutions like this</a> with "complicated" HTML markup.</p>

<p>This is my code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
  position: relative;
  background: url(https://i.stack.imgur.com/P56gr.jpg);
  width: 300px;
  height: 200px;
}
div:after {
  content: "";
  position: absolute;
  background: url(https://i.stack.imgur.com/P56gr.jpg);
  display: block;
  width: 300px;
  height: 200px;
  bottom: -210px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>