How to create a shifted border? - html

Question

I am trying to achieve something like this:
I tried to use the pseudo-element :after like this:
.drink {
background-color: $drink-bg;
max-width: 50%;
position: relative;
&:after {
position: absolute;
top: -10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 1px solid black;
}
img {
max-width: 100%;
}
}
It doesn't seem to work. Do I have to use 2 elements to achieve this? Or I can use just 1 element?
Because the image is responsive, the border should "follow" the width and height of the image element.

Answer 1

Your pseudo-element is actually styled correctly, and you are one small step away to get it to work: you just need to declare content: '' on it. Without a defined content property, the pseudo-element will not be rendered. This is because:
On elements, content always computes to normal. On ::before and ::after, if normal is specified, computes to none.
By extension of logic, an element without any content will not be rendered.
.drink {
background-color: $drink-bg;
max-width: 50%;
position: relative;
}
.drink:after {
content: ''; /* Added this rule */
position: absolute;
top: -10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 1px solid black;
}
.drink img {
max-width: 100%;
}
<div class="drink">
<img src="http://via.placeholder.com/300x500" />
</div>