CSS how to replace all img with their alt and border?

Question

css

there is a problem...
you need to hide the image, its place in the text should remain (let's say visability:hidden)
add a frame
display alt inside the frame
How???

Answer 1

img {  
    display: block;
    position: relative;
    min-height: 50px;   
}
 img:before {
    content: " ";
    display: block;
    position: absolute;
    top: -10px;
    left: 0;
    height: calc(100% + 10px);
    width: 100%;
    border: 2px dotted;
    border-radius: 5px;
}
img:after {
    content: " " attr(alt);
    display: block;
    font-style: normal;
    position: absolute;
    top: 5px;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 0 5px;
}

Something like this,
src still needs to be replaced with non-working ones