img元素

Question

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我必须在img元素的左侧绘制两条垂直线。这些行应该width 5px。第一行位于img的左侧。在第二行开始之前，会有另一个5px的空格。

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

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

原始图片：

带图片的图片

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>

Answer 2

您可以将图像设为背景元素，然后添加边框和伪元素：

div {
  width: 600px;
  height: 300px;
  background: grey url("http://www.lorempixel.com/600/300");
  border-left: 5px solid red;
  box-sizing:border-box
}

div:after {
  content: "";
  width: 5px;
  height: 300px;
  margin-left: 10px;
  background: red;
  position: absolute;
}

<div></div>

Answer 3

下面的代码段演示了如何使用应用于包含父元素的pseudo-elements来实现预期结果。

.img-wrapper:before,.img-wrapper:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5px;
    background: red;
    height: 99%;
}

.img-wrapper:before {
    left: 0;
}

.img-wrapper {
    position: relative;
}

.img-wrapper:after {
    left: 10px;
}

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