Can a ::before selector be used with a <textarea>?

HtmlCssFormsCss SelectorsPseudo Element

Html Problem Overview


I'm experimenting with some styles on <textarea>s and I tried doing some stuff with ::before and ::after selectors and I couldn't to anything to get them to work. So the question is: is this possible? I know the CSS surrounding forms is arcane beyond mention but it seems like this should work.

Html Solutions


Solution 1 - Html

The :before and :after will not work on a text-area (nor any element that cannot contain another element, such as img or input), because the generated content of the pseudo-element gets placed within the element but before or after that element's content, and acts itself as an element. The pseudo-element does not get placed before or after the parent element itself (contrary to some information one may find on the internet). To illustrate:

If you have this css:

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

Then html like this:

<p>Original Content</p>

Effectively renders to the screen as if the source code were:

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

Not as if the source code were:

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

Which is why tags that cannot contain any html element "content" (like those mentioned above) do not recognize the pseudo-elements, as there is no "place" for that content to be generated to. The textarea can contain "content," but only pure text content.

Solution 2 - Html

<div class='tx-div-before'></div>

use this before textarea and

<div class='tx-div-after'></div> 

use this code after textarea. and add before and after psedu element.

Solution 3 - Html

Actually, you can add content with :after on an input element. This will add a sort of tip when the element is in its active state:

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionxj9View Question on Stackoverflow
Solution 1 - HtmlScottSView Answer on Stackoverflow
Solution 2 - HtmlShakibView Answer on Stackoverflow
Solution 3 - HtmlKyle RamirezView Answer on Stackoverflow