Przesunięcie obrazu po użyciu :after

Szanowni Państwo,
mój problem dotyczy pseudo elementu :after,
mam div'a o klasie .square, który robi za obraz.
Aby obraz był kwadratowy użyłem pseudo elementu :after.
Problem polega na tym że obraz background-image jest przesunięty z pierwotnego miejsca. (zrzut ekranu).
kod html:

<div class="row justify-content-center">
            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                <div class="square" style="background-image: url(images/a1.jpg)"></div>
            </div>
            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                <div class="square" style="background-image: url(images/a2.jpg)"></div>
            </div>
            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                <div class="square" style="background-image: url(images/a3.jpg)"></div>
            </div>
        </div>

kod css:

.square {
    position: relative;

    width: 100%;
    margin: auto;
    border-radius: 6px;
    margin: 10px;
    background-size: 80%;
    background-repeat: no-repeat;
    background: url('') 90% center / cover;
    background-color: #f44336;

}

.square:after {
    content: "";
    display: block;
    padding-bottom: 100%;
    position: relative;
    left: -20px;
    top: 0px;
}

zrzut ekranu:

Wrzuć to proszę na http://jsfiddle.net i podeślij link.

Przepisując do poleconego serwisu, rozwiązałem problem. :D Dziękuje.

No to napisz może w czym był problem - są szanse, że to rozwiązane przyda się komuś innemu (ja stawiam na jakiś padding - mam rację?).