Как правильно добавить иконку справа используя :before?

Question

[Jedi]

Здравствуйте!

Если введенные пользователем данные чем-то не устраивает сервер, нужно это отобразить. И вот, я это реализовал! Yay!

<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

Но есть одна поблемка... Смотрите что происходит на мобильных экранах.



Как грамотно поставить эту иконку к small?

Помогите решить проблему, пожалуйста.

Answer 1

[Dymok]

.error-message
  position: relative;
  padding-right: 20px;
  &::after
    ....
    position: absolute
    top: 50%;
    right: 0;
    transform: translateY(-50%);

Answer 2

[ⓒⓢⓢ]

можем погадать, например так:

&:after {
  ...
  display: inline-block;
  ...
}

Answer 3

[SuperToster]

Привет.
https://jsfiddle.net/963ukLqb/