div::before {
  content: url(image.jpg);
  transform: scale(0.5);
}

content: “line 1 \a line 2 \a line 3”; should do the trick

\a is the “content “newline sequence.

\a is the “content” newline code

I just want to know how we can make the text in content property to be displayed as two or more line, for example:

.before { content: “line 1 line 2 line 3”};

then it will displayed as:

line 1
line 2
line 3

Thanks

True ! I’m waiting for it too.

Note that you cannot change the dimensions of the image
when inserted this way.

You can if you give it ‘display:block’ or ‘display:inline-block’ (or probably some other display values other than ‘inline’). Or if you float it, or absolute position it.

Raster images (png, jpg, gif) won’t scale in the content of :before|:after but, an svg DOES scale based on the box size.

Of course the SVG has to be responsive.

Just add a span around your input element and give it the asterisk class instead of the input. Since ::before + ::after add the content before/after the elements own content and input elements don’t have content, your example doesn’t work.

I want to add an asterisk, as in the image on the left to the input on the right.

I am completely stuck and it’s stupid that I don’t see.

Have you tried background-size: cover, as seen in this article?