Add line break to after or before pseudo-element content

Question

I do not have access to the HTML or PHP for a page and can only edit via CSS  I ve been doing modifications on a site and adding text via the   after or   before pseudo-elements and have found that escape Unicode should be used for things such as a space before or after the added content  How do I add multiple lines in the content property  In example the HTML break line element is only to visualize what I would like to achieve   headerAgentInfoDetailsPhone  after     content   Office  XXXXX  lt br   gt  Mobile  YYYYY

User · Answer

I had to have new lines in a tooltip  I had to add this CSS on my  after     tooltip after     width  500px    white-space  pre    word-wrap  break-word      The word-wrap seems necessary   In addition  the  A didn t work in the middle of the text to display  to force a new line      amp  13  amp  10     worked  I was then able to get such a tooltip

User · Answer

For people who will going to look for  How to change dynamically content on pseudo element adding new line sign  here s answer  Html chars like  amp  13  amp  10  will not work appending them to html using JavaScript because those characters are changed on document render  Instead you need to find unicode representation of this characters which are U 000D and U 000A so we can do something like    x000D   x000D  var el   document querySelector  div    x000D  var string   el getAttribute  text   replace         u000D u000A    x000D  el setAttribute  text   string   x000D  div before  x000D     content  attr text   x000D     white-space  pre  x000D    x000D   lt div text  I want to break it in javascript  after comma sign  gt  lt  div gt   x000D   x000D   x000D    Hope this save someones time  good luck

User · Answer

You may try this   headerAgentInfoDetailsPhone       white-space pre    headerAgentInfoDetailsPhone after       content  Office  XXXXX  A Mobile  YYYYY        Js Fiddle

User · Answer

Found this question here that seems to ask the same thing  Newline character sequence in CSS   39 content  39  property   Looks like you can use  A or  00000a to achieve a newline

User · Answer

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

User · Answer

lt p gt Break sentence after the comma  lt span class  mbr  gt   lt  span gt in case of mobile version  lt  p gt   lt p gt Break sentence after the comma  lt span class  dbr  gt   lt  span gt in case of desktop version  lt  p gt    The  mbr and  dbr classes can simulate line-break behavior using CSS display table  Useful if you want to replace real  lt br   gt    Check out this demo Codepen  https   codepen io Marko36 pen RBweYY  and this post on responsive site use  Responsive line-breaks  simulate  lt br   gt  at given breakpoints

User · Answer

Add line break to   after or   before pseudo-element content   yourclass before       content   text here first  A  text here second       white-space  pre

User · Answer

Nice article explaining the basics  does not cover line breaks  however     A Whole Bunch of Amazing Stuff Pseudo Elements Can Do   If you need to have two inline elements where one breaks into the next line within another element  you can accomplish this by adding a pseudo-element  after with content   A  and white-space  pre  HTML   lt h3 gt       lt span class  label  gt This is the main label lt  span gt       lt span class  secondary-label  gt secondary label lt  span gt   lt  h3 gt    CSS   label after       content    A       white-space  pre

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

Examples related to css

Examples related to pseudo-element