::after CSS für meine Bilder zeigt keine Wirkung, was mache ich nur falsch?

Hier ist das CSS

img {
    position: relative;
    display: block;
}

img::after {
    content: "" 
    display: block;
    position: absolute;
    bottom: -10px;
    top: -10px;
    right: -10px;
    left: -10px;
    border-left: 10px solid rgba(0, 0, 0, 0.3);
    border-top: 10px solid rgba(0, 0, 0, 0.3);
    border-right: 10px solid rgba(0, 0, 0, 1);
    border-bottom: 10px solid rgba(0, 0, 0, 1);
}

Bei so genannten Replaced Elements, wozu auch Bilder gehören, haben ::before und ::after keine Wirkung.

Eigenschaften von Replaced Elements

Das sind zum Beispiel img iframe, textarea embed, video oder Formular-Elemente. Ein Replaced Element ist ein Element dessen Inhalt sich im HTML-Kontext aus seinen Definitionsparametern definiert und nicht alleine durch seine Auszeichnung. Die Auszeichnung ist nur dafür zuständig zu definieren was es ist. Erscheinungsbild und Größe definieren sich erst mit der Ressource, zum Beispiel durch die Angabe von Höhe und Breite als Attribute (zum Beispiel iframes, Bilder), oder browserspezifische Vorgaben (zum Beispiel Formularelemente).

Einige Werte können durch CSS-Angaben modifiziert werden, andere nicht. Die meisten HTML-Elemente sind Non-replaced

Workaround

Bilder zum Beispiel mit einem Span, Div oder Link zu umgeben, und ::before und / oder ::after darauf beziehen, umgeht die Einschränkung.

.imglink img {
    display: block;/* verhindert unteren Abstand zwischen Rahmen und Bild */
}

.imglink {
    position: relative;
    display: inline-block;/* sorgt dafür, dass der Link das Bild vollständig umgibt , und damit auch der Rahmen es tut */
}

.imglink::after {
    content: "" /* für Pseudoelemente zwingend */
    display: block;
    position: absolute;
    bottom: -10px;
    top: -10px;
    right: -10px;
    left: -10px;
    border-left: 10px solid rgba(0, 0, 0, 0.3);
    border-top: 10px solid rgba(0, 0, 0, 0.3);
    border-right: 10px solid rgba(0, 0, 0, 1);
    border-bottom: 10px solid rgba(0, 0, 0, 1);
}

Wenn das Pseudoelement allerdings nur den einen Zweck erfüllen soll die Rahmendimension über die volle Breite hinausragen zu lassen, kann CSS calc die Anforderung ebenfalls erfüllen. Der Bildbreite die doppelte Rahmendicke in Pixel hinzufügen, das Bild relativ positionieren, und links und rechts mit dem Minuswert der Rahmenbreite „hinausrücken“.

img {
    position:relative;
    right:-10px;
    left:-10px;
    width: calc(100% + 20px); /* ggf. max-width berücksichtigen */
    border-top: 10px solid rgba(0, 0, 0, 0.3);
    border-right: 10px solid rgba(0, 0, 0, 1);
    border-bottom: 10px solid rgba(0, 0, 0, 1);
    border-left: 10px solid rgba(0, 0, 0, 0.3);
}