How to add icon to the right using :before?

Hello!

If the user input is not good enough for this server, you need to display it. And now, I realized! Yay!

5c9a3c082993f277999760.png
<small className="error-message">{errors.password}</small>


.error-message
&:after
 content: ""
 display: block
 background: url("./warning.svg") no-repeat
 width: 17px
 height: 17px
 float: left
 margin-right: .4em

 color: #de071c

 margin-bottom: .8em


But there is one problemka... See what's happening on mobile screens.

5c9a3c72a23ee469281202.png

How to put this icon to small?

Help solve the problem, please.
March 19th 20 at 08:41
3 answers
March 19th 20 at 08:43
Solution
.error-message
 position: relative;
 padding-right: 20px;
&::after
....
 position: absolute
 top: 50%;
 right: 0;
 transform: translateY(-50%);
March 19th 20 at 08:45
Solution
can you read, for example:
&:after {
...
 display: inline-block;
...
}
March 19th 20 at 08:47
Solution

Find more questions by tags CSS