Add line break to ::after or ::before pseudo-element content

by

The content property states:

Authors may include newlines in the generated content by writing the “\A” escape sequence in one of the strings after the ‘content’ property. This inserted line break is still subject to the ‘white-space’ property. See “Strings” and “Characters and case” for more information on the “\A” escape sequence.

So you can use:

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

http://jsfiddle.net/XkNxs/

When escaping arbitrary strings, however, it’s advisable to use \00000a instead of \A, because any number or [a-f] character followed by the new line may give unpredictable results:

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\\"').replace(/\n/g, '\\00000a')} }"`;
}

More Related Contents:

  1. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  2. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  3. Why do the :before and :after pseudo-elements require a ‘content’ property?
  4. CSS :after not adding content to certain elements
  5. Font Awesome 5 Choosing the correct font-family in pseudo-elements
  6. Why don’t :before and :after pseudo elements work with `img` elements? [duplicate]
  7. What is the difference between a pseudo-class and a pseudo-element in CSS?
  8. Font Awesome 5, why is CSS content not showing?
  9. Can I change the height of an image in CSS :before/:after pseudo-elements?
  10. CSS :before on inline SVG
  11. Is there a way to use SVG as content in a pseudo element ::before or ::after
  12. Should I use single or double colon notation for pseudo-elements?
  13. How can I make generated content selectable?
  14. Universal selector * and pseudo elements
  15. Combine :after with :hover
  16. Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?
  17. ::before pseudo-element stacking order issue
  18. CSS3 ::selection behaves differently in FF & Chrome
  19. Vertically centering content of :before/:after pseudo-elements
  20. Nesting pseudo-elements inside pseudo-elements
  21. “text-decoration” and the “:after” pseudo-element, revisited
  22. css rotate a pseudo :after or :before content:”” [duplicate]
  23. Should I use single colons (:) or double colons (::) for before, after, first-letter and first-line pseudo-elements?
  24. Change style of pseudo elements in angular2
  25. Can you apply a width to a :before/:after pseudo-element (content:url(image))?
  26. prevent a pseudo element from triggering hover?
  27. Purpose of *:before, *:after rule without content property
  28. Apply webkit scrollbar style to specified element
  29. What is the difference between pseudo-classes and pseudo-elements?
  30. CSS3 transitions on pseudo-elements (:after, :before) not working?

Leave a Comment