img 元素上带有空格的行答案

【问题标题】：Lines with spaces on img elementimg 元素上带有空格的行
【发布时间】：2017-10-16 20:41:54
【问题描述】：

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

&lt;img src="https://dummyimage.com/vga"&gt;

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

我用span 元素找到了这个解决方案：Using CSS to Draw 3 Vertical Lines on and Image

是否有其他替代解决方案？我用伪:after 和:before 尝试了它，但没有得到它。有什么想法吗？

原图：

带线条的图片：

【问题讨论】：

您目前的工作方式到底有什么问题？另外，请附上您目前为此使用的 HTML 和 CSS，以便我们提供帮助。
我不相信除了原始图像上的 spans 或 divs 之外，您可以做到这一点。
您是否尝试过使用图像父级/包装器的::before / ::after 伪元素？
向我们展示你的标记，不要害羞:)
pseudo-elements 会起作用，但前提是您将它们应用于包含元素，包裹在 img 标签周围 - img 标签是一个自动关闭的 void 标签，所以它不能有任何pseudo-elements 应用于它，因为它不能包含任何元素。

标签： html css

【解决方案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>

【讨论】：

【解决方案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;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

下面的代码 sn-p 演示了如何使用将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;
}

&lt;div class="img-wrapper"&gt;&lt;img src="https://dummyimage.com/vga"&gt;&lt;/div&gt;

【讨论】：