Can You Add Line Breaks to the :After Pseudo Element

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

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')} }"`;
}

adding a line break to li:before pseudo-element

Using \A

replace <br> To \A

Css

li:before{
content:'hello \A how \A are \A';
white-space: pre;
}

Snippet Example

li:before{

content:'hello \A how \A are \A';

white-space: pre;

}

<ul>

<li></li>

</ul>

Can you add line breaks to the :after pseudo element?

You won't be able to render HTML tags but you can set style like this:

.needs-space:after {
    content: " ";
    display: block;
    clear: both; /* if you need to break floating elements */
}

The main setting here is display: block; This will render :after content inside a DIV. And this pseudo element is supported by all latest browsers. Including IE. Saying this you should be aware of your users and their browsers.

Force no line-break on pseudo element (:after)

You can also go with using the standard diamond from UTF8: ◇.

If you let your :after as display: inline it will not break because you're not adding any space between the last word and it.

.alpha.solution3:after {

  display: inline;

  content: "◇";

  font-weight: normal;

  font-size: 1.2em;

}

<h1 class="alpha solution3">A solution that does not require Javascript neither a SPAN</h1>

CSS pseudo-element content value with line-break via attr inserted by Javascript

Use a plain newline character (\n in your JavaScript string), fix the getElementById() call (get rid of "#"), and add white-space: pre-wrap; to the CSS.

const ele = document.getElementById('my-ele')

ele.classList.add('loading');

ele.setAttribute('loading-text', 'Your file is being generated...\nThis may take some minutes');

.loading::after {

  white-space: pre-wrap;

  content: attr(loading-text);

}

<div id="my-ele"></div>

Adding a CSS pseudo-element at the end of each non-explicit line break

If you can do it with only divs then it would be easy to consider pseudo elements:

.container {
  overflow: hidden;
  padding-bottom:15px;
}

.edge {
  display: inline-block;
  margin-top: 15px;
  position: relative;
  font-size:0;
}

.edge::before {
  content: var(--i, url('https://via.placeholder.com/25x150'));
}

.edge::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  height: 15px;
  background: url("https://media.freestocktextures.com/cache/25/a8/25a8e8f0073efa0592f685739ce3386b.jpg");
  left: -100vw;
}

<div class="container">
  <div class="edge" style="--i:url(https://via.placeholder.com/20x200)"></div>
  <div class="edge" style="--i:url(https://via.placeholder.com/15x300)"></div>
  <div class="edge"></div>
  <div class="edge" style="--i:url(https://via.placeholder.com/20x200)"></div>
  <div class="edge" style="--i:url(https://via.placeholder.com/15x300)"></div>
  <div class="edge"></div>
  <div class="edge" style="--i:url(https://via.placeholder.com/20x200)"></div>
  <div class="edge" style="--i:url(https://via.placeholder.com/15x300)"></div>
  <div class="edge"></div>
  <div class="edge" style="--i:url(https://via.placeholder.com/20x200)"></div>
  <div class="edge" style="--i:url(https://via.placeholder.com/15x300)"></div>
  <div class="edge"></div>
  <div class="edge" style="--i:url(https://via.placeholder.com/20x200)"></div>
  <div class="edge" style="--i:url(https://via.placeholder.com/15x300)"></div>
  <div class="edge"></div>
  <div class="edge" style="--i:url(https://via.placeholder.com/20x200)"></div>
  <div class="edge" style="--i:url(https://via.placeholder.com/15x300)"></div>
  <div class="edge"></div>
  <div class="edge" style="--i:url(https://via.placeholder.com/20x200)"></div>
  <div class="edge" style="--i:url(https://via.placeholder.com/15x300)"></div>
  <div class="edge"></div>
</div>

Line breaks in CSS pseudo elements using attribute selector

If you are using \A or \a or anything similar as a value to your HTML attribute is just a static value. Using something like following in your CSS will not parse such syntax for your content property

<div data-stuff="Hello \a World"></div>

And CSS like

content: attr(title); 
/* 
   This will not parse \a as a line break and would rather treat it as 
   a string.
*/

If you want to add line breaks from CSS, you need to declare \A in your stylesheet and not the HTML attribute. Hence, something like

content: attr(title) '\A World'; /* works now, as your \A will be parsed by CSS */

Prevent pseudo-element from breaking a line by itself

You can add a negative margin equal to the icon size and use padding on the parent element to rectify this. This trick will enable the break when we reach the first word and logically the icon will follow.

I also removed the margin-left and made the width bigger then adjusted the backgound position to the right.

p {

  padding-right:22px;

}

.txtbtn {

  font-size: 1.125rem;

  line-height: 1.222222222;

  letter-spacing: 2.57px;

  color: orange;

  text-decoration: none;

  position: relative;

  text-transform: uppercase;

}

.txtbtn::after {

  position: relative;

  top: 0;

  display: inline-block;

  margin-right:-32px;

  width: 32px;

  height: 15px;

  content: "";

  background: url('https://www.jea.com/cdn/images/svgs/right-arrow.svg') no-repeat right/contain;

}

<p><a href="#" class="txtbtn">Lorem ipsum dolor sit amet, consectetur abittor.</a></p>