img元素上有空格的行

Question

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

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

我必须在img元素的左侧绘制两条垂直线.该线应该有一个width的5px.第一行位于img的左侧.5px直到第二行开始,才会出现另一个空间.

我发现这个解决方案包含span元素:使用CSS绘制3条垂直线和图像

有没有更好的替代解决方案？我尝试使用伪: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>