Почему не работает ::before при объявлении в нем контента?

Question

[urajo]

Нужно при помощи before сделать подчеркивания инпута? инпут имеет класс search__text, вариант с бордером не подходит

Блок родитель

.search__text{
  position: relative;
  width: 222px;
  font-size: 18px;
  background-color: rgba(0, 0, 0, 0);
  color: var(--HeaderFooter-textColor);
  border: 2px solid transparent;
}

Блок с псевдоэлементом

.search__text::before{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 222px;
  background-color: #ffffff;
}