Why do the :before and :after pseudo-elements require a ‘content’ property?

by

Here are some references to various W3C specifications and drafts:

Selectors Level 3

The :before and :after pseudo-elements can be used to insert generated content before or after an element’s content.

The :before and :after pseudo-elements

Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element’s document tree content. The content property, in conjunction with these pseudo-elements, specifies what is inserted.

The content attribute

Initial: none

This property is used with the :before and :after pseudo-elements to generate content in a document. Values have the following meanings:

none – The pseudo-element is not generated.

The styling applied to ::before and ::after pseudo-elements affects the display of the generated content. The content attribute is this generated content, and without it present, the default value of content: none is assumed, meaning there is nothing for the style to be applied to.

If you don’t want to repeat content:''; multiple times, you can override this simply by globally styling all ::before and ::after pseudo-elements within your CSS (JSFiddle example):

::before, ::after {
    content:'';
}

More Related Contents:

  1. Why don’t :before and :after pseudo elements work with `img` elements? [duplicate]
  2. Can I have multiple :before pseudo-elements for the same element?
  3. CSS Pseudo Element Counters: can you increment an alphabet letter “a”, “b”, “c”, etc instead of a number?
  4. Can you apply a width to a :before/:after pseudo-element (content:url(image))?
  5. Purpose of *:before, *:after rule without content property
  6. Can I use a :before or :after pseudo-element on an input field?
  7. Is it possible to set the stacking order of pseudo-elements below their parent element? [duplicate]
  8. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  9. CSS :after not adding content to certain elements
  10. What is the difference between a pseudo-class and a pseudo-element in CSS?
  11. CSS content property: is it possible to insert HTML instead of Text?
  12. Can I change the height of an image in CSS :before/:after pseudo-elements?
  13. CSS :before on inline SVG
  14. Can I target a :before or :after pseudo-element with a sibling combinator?
  15. Should I use single or double colon notation for pseudo-elements?
  16. How can I make generated content selectable?
  17. Universal selector * and pseudo elements
  18. Z-index with before pseudo-element
  19. ::before pseudo-element stacking order issue
  20. CSS3 ::selection behaves differently in FF & Chrome
  21. Vertically centering content of :before/:after pseudo-elements
  22. CSS data attribute new line character & pseudo-element content value
  23. “text-decoration” and the “:after” pseudo-element, revisited
  24. css rotate a pseudo :after or :before content:”” [duplicate]
  25. Css Content, Attr and Url in the same sentence
  26. prevent a pseudo element from triggering hover?
  27. Apply webkit scrollbar style to specified element
  28. What is the difference between pseudo-classes and pseudo-elements?
  29. Using attr(data-icon) property to display unicode before element
  30. Combine CSS Attribute and Pseudo-Element Selectors?

Leave a Comment