Can a ::before selector be used with a ?

by

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.

More Related Contents:

  1. Using CSS :before and :after pseudo-elements with inline CSS?
  2. Which elements support the ::before and ::after pseudo-elements?
  3. How to collect and manipulate data in HTML using
  4. Understanding CSS selector priority / specificity
  5. How can I select the last element with a specific class, not last child inside of parent?
  6. How to align checkboxes and their labels consistently cross-browsers
  7. Put icon inside input element in a form
  8. Are class names in CSS selectors case sensitive?
  9. Why doesn’t table > tr > td work when using the child selector?
  10. Disabled form fields not submitting data [duplicate]
  11. Use a normal link to submit a form
  12. What is the performance impact of the universal selector?
  13. Why is nth-child selector not working?
  14. CSS selector with period in ID
  15. How can I use the CSS pseudo-element :before{ content: ” } to affect an element?
  16. Avoiding repeated constants in CSS
  17. CSS data attribute new line character & pseudo-element content value
  18. What is the ::content/::slotted pseudo-element and how does it work?
  19. Why does the general-sibling combinator allow toggling pseudo-element’s content, but not the adjacent-sibling?
  20. How do I select an element that has a certain class?
  21. Selecting the last element among various nested containers
  22. Zebra striping a flexbox table with wrapping items
  23. How to use nth-child for styling with a table with rowspan?
  24. Is there a CSS not equals selector?
  25. after pseudo element not appearing in code
  26. pseudo-element acting like a grid item in CSS grid
  27. Make input element (type=”text”) handle multiple lines of text
  28. Adding text before list
  29. How can I select elements in CSS by partial ID value?
  30. How can I get a specific number child using CSS?

Leave a Comment