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

Question

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

Answer 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

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

Answer 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">