Можно ли использовать:: перед селектором с <textarea>?

Я экспериментирую с некоторыми стилями на <textarea>, и я попытался сделать что-то с селекторами ::before и ::after, и я не мог ни с чем заставить их работать. Итак, вопрос: возможно ли это? Я знаю, что формы, окружающие CSS, являются загадочными, но, похоже, это должно работать.

Ответ 1

:before и :after не будут работать с text-area (ни любым элементом, который не может содержать другой элемент, например img или input), поскольку генерируемое содержимое псевдоэлемента получает помещается внутри элемента, но до или после этого содержимого элемента, и действует как элемент. Псевдоэлемент не размещается до или после самого родительского элемента (в отличие от некоторой информации, которую можно найти в Интернете). Чтобы проиллюстрировать:

Если у вас есть этот css:

p:before {content: 'before--'}
p:after {content: '--after'}

Тогда html вот так:

<p>Original Content</p>

Эффективно отображается на экране, как если бы исходный код был:

<p>before--Original Content--after</p>

Не, как если бы исходный код был:

before--<p>Original Content</p>--after

Вот почему теги, которые не могут содержать какой-либо элемент html-содержимого (например, упомянутый выше), не распознают псевдоэлементы, так как нет никакого "места" для этого контента, который должен быть сгенерирован. textarea может содержать "контент", но только чистый текстовый контент.

Ответ 2

На самом деле вы можете добавить контент с :after на элемент ввода. Это добавит подсказку, когда элемент находится в активном состоянии:

#gallery_name {
   position:relative;
}
#gallery_name:focus:after {
   content: "Max Characters: 30";
   color: #FFF;
   position: absolute;
   right: -150px;
   top:0px;
}

<input id="gallery_name" type="text" name="gallery_name" placeholder="Gallery Name">