How to Insert a Line Break Before an Element Using Css

How to insert a line break before an element using CSS

It's possible using the \A escape sequence in the psuedo-element generated content. Read more in the CSS2 spec.

#restart:before { content: '\A'; }

You may also need to add white-space:pre; to #restart.

note: \A denotes the end of a line.

p.s. Another treatment to be

:before { content: ' '; display: block; }

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

How to line-break from css, without using br / ?

Impossible with the same HTML structure, you must have something to distinguish between Hello and How are you.

I suggest using spans that you will then display as blocks (just like a <div> actually).

p span {  display: block;}

<p><span>hello</span><span>How are you</span></p>

How can I use CSS to insert a line break after but not before an element?

By default, HTML elements ignore whitespace.

You need to change that:

.break:after {
    content:"\000A";
    white-space: pre;
}

Line break (like br ) using only css

It works like this:

h4 {
    display:inline;
}
h4:after {
    content:"\a";
    white-space: pre;
}

Example: http://jsfiddle.net/Bb2d7/

The trick comes from here: https://stackoverflow.com/a/66000/509752 (to have more explanation)

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>

how to insert content before each new line using CSS

So, you select this div with class quote, extract its innerHTML, and convert it to a string with the toString() method. You then split this string with <br> separater, which results in an array. You then map this array to include a * before the start of each new line word.

Finally, you join this array together using the same <br> separator, and set the innerHTML of your quote to this. The code ends up looking like this.

const quote = document.querySelector(".quote");
let innerHTML = quote.innerHTML;

const t = innerHTML.toString();
let s = t.split("<br>");
s = s.map((i) => {
  return `*${i}`;
});
s = s.join("<br>");
quote.innerHTML = s;

CSS to line break before/after a particular `inline-block` item

I've been able to make it work on inline LI elements. Unfortunately, it does not work if the LI elements are inline-block:

Live demo: http://jsfiddle.net/dWkdp/

Or the cliff notes version:

li { 
     display: inline; 
}
li:nth-child(3):after { 
     content: "\A";
     white-space: pre; 
}

How to Insert a Line Break Before an Element Using Css