Различное значение содержимого псевдоэлемента в зависимости от атрибута типа ввода

Question

я хотел бы иметь разное содержимое псевдоэлемента :: before для каждого атрибута типа ввода

я имею в виду: если разметка выглядит так ( type = "email" )

<input type="email" name="foo" />
<label for="foo">
  <span>Email</span>
</label>

я хотел бы сделать значение содержимого $ icon1

span::before {
  content: $icon1;
}

, но если разметка выглядит так ( type = "password" )

<input type="password" name="foo-foo" />
<label for="foo-foo">
  <span>Password</span>
</label>

Я хочу сделать значение содержимого make $ icon2

span::before {
  content: $icon2;
}

Надеюсь, вы понимаете, что я имею в виду

Answer 1

Можно комбинировать с селектором атрибутов.

input[type=email]+label span::before {
  content: "email input";
}

input[type=password]+label span::before {
  content: "password input";
}

<input type="email" name="foo" />
<label for="foo">
      <span></span>
</label>

<input type="password" name="foo-foo" />
<label for="foo-foo">
      <span></span>
</label>