добавление элементов :before и :after для input

Question

Пробовала добавить before и after к label, но думаю, что это не правильно, да и код как-то не срос у меня( Подскажите, пожалуйста

.content__form-label {
  border: 1px solid #EEEEEE;
  border-radius: 32px;
  display: inline-block;
}

.content__form-label:first-child:after {
  content: '\f023';
  font-family: 'fontawesome';
  display: inline-block;
  font-size: 24px;
  color: #8B929E;
  line-height: 47px;
}

.content__form-input {
  width: 100%;
  max-width: 352px;
  border-radius: 32px;
  border: none;
  background-color: #fff;
  width: calc(100% - 24px - 20px);
  height: 100%;
  padding: 16px 24px;
  box-sizing: border-box;
}

<label for="" class="content__form-label">
        <input type="text" class="content__form-input" disabled>
</label>

Answer 1

Не парьтесь и используйте тег i

.content__form-label {
  border: 1px solid #EEEEEE;
  border-radius: 32px;
  display: inline-block;
}

.content__form-input {
  width: 100%;
  max-width: 352px;
  border-radius: 32px;
  border: none;
  background-color: #fff;
  width: calc(100% - 24px - 20px);
  height: 100%;
  padding: 16px 24px;
  box-sizing: border-box;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<label for="" class="content__form-label">
  <input type="text" class="content__form-input" disabled>
  <i class="fas fa-lock"></i> 
</label>

БЛОГ НА HUSL

добавление элементов :before и :after для input

Ответы (1 шт):