Lines with spaces on img element

Question

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

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

I have to draw two vertical lines on the left side of an img element. The lines should have a width of 5px. The first line is on the left side of the img. Than there comes a space of another 5px until the second line starts.

I'v found this solution with span elements: Using CSS to Draw 3 Vertical Lines on and Image

Is there an bether alternative solution? I tried it with pseudo :after and :before but didnt' get it. Any ideas?

Original image:

Image with lines:

What exactly is the issue that you are having with the way you are currently doing it? Also, please include your HTML and CSS that you are currently using for this, so we can help. — FluffyKitten, Oct 16 '17 at 12:22
I don't believe you can do it other way than spans or divs over original image. — unalignedmemoryaccess, Oct 16 '17 at 12:22
Have you tried to use `::before` / `::after` pseudo-elements of the image's parent/wrapper? — Krusader, Oct 16 '17 at 12:24
@tilz0R You can also with CSS gradients, with pseudo-elements. — dfsq, Oct 16 '17 at 12:25
`pseudo-elements` would work, but only if you apply them to a containing element, wrapped around the `img` tag - the `img` tag is a self-closing void tag, so it cannot have any `pseudo-elements` applied to it, since it cannot *contain* any elements. — UncaughtTypeError, Oct 16 '17 at 12:26
Possible duplicate of [Why don't :before and :after pseudo elements work with \`img\` elements?](https://stackoverflow.com/questions/7396469/why-dont-before-and-after-pseudo-elements-work-with-img-elements) — caramba, Oct 16 '17 at 12:37

score 5 · Accepted Answer · edited Oct 16 '17 at 12:30

You need to wrap the image and put the pseudo elements on the wrap. Try like so:

.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>

sideroxylon · Answer 2 · 2017-10-16T12:41:54.153

2

You can make the image a background element, then add a border and a pseudo element:

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>

edited Oct 16 '17 at 12:41

answered Oct 16 '17 at 12:33

sideroxylon

4,338
1
22
40

score 1 · Answer 3 · answered Oct 16 '17 at 12:32

The code snippet below demonstrates how you can achieve the intended result using pseudo-elements applied to a containing parent element.

.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>

Lines with spaces on img element

3 Answers3