html - img 元素上带有空格的行

Question

img:after,
img:before {
  /*POSSIBLE SOLUTION WITH PSEUDO?*/
}

<img src="https://dummyimage.com/vga">

我必须在 img 元素的左侧绘制两条垂直线。线条的宽度 应为5px。第一行在 img 的左侧。在第二行开始之前还有一个 5px 的空间。

我发现这个解决方案包含 span 元素:Using CSS to Draw 3 Vertical Lines on and Image

是否有更好的替代解决方案？我用伪 :after 和 :before 尝试过，但没有得到。有什么想法吗？

原始图片:

带线条的图片:

Answer 1

你需要包装图像并将伪元素放在包装上。像这样尝试:

.my-image-wrap {
    position: relative;
}

.my-image-wrap:before,
.my-image-wrap:after {
    content: '';
    position: absolute;
    display: block;
    width: 5px;
    background-color: red;
    left: 0;
    top: 0;
    bottom: 0;
}

.my-image-wrap:after {
    left: 10px;
}

<div class="my-image-wrap">
    <img src="https://dummyimage.com/vga">
</div>