Добавление «необходимого» текста в HTML-форму через CSS

<form>
  <input type="text" name="name" id="name" /><span class="required"></span>
</form>

Я хочу показать какой-нибудь текст, например * или Обязательно в элементе вместо «жесткого кодирования» текста для каждого такого места мне нужен текст, чтобы форма выглядела примерно так это:

[input box] Required

Я погуглил и обнаружил, что это можно сделать с помощью стиля CSS, используя контент , например:

.required:before
{
  content: "aaaa"
}

Но должен ли я использовать этот метод (поддерживается ли он во всех основных браузерах для пример) или есть более предпочтительный способ делать такие вещи?

Спасибо

UPDATE Ps. Я не хочу использовать для этого JavaScript, просто CSS.