how to insert content before each new line using CSS

Question

I have a HTML document that looks like the following, and using only CSS I want to insert an asterisk before each line. For the first line, the following works:

p:before {
  content: "*";
}

<p>
  test
  <br> test2
  <br> test3
</p>

but I don't know how to add the asterisk before each subsequent line. I've tried:

p:before {
  content: "*";
}

p>br:after {
  content: "*";
}

<p>
  test
  <br> test2
  <br> test3
</p>

but it doesn't seem to work.

How can I accomplish this?

codepen: https://codepen.io/ds241/pen/QWQyPKY

Answer 1

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;

Answer 2

Two ways to Make a Line Break with Unicode

First assign the following CSS:

Figure I

p {
  white-space: pre;
}

The above applies to both techniques. The first way is to use 
 in HTML.

Figure II

<p>test1&#10;test2&#10;test3&#10;</p>

The second way is to use ::before, content, and \00000a.

Figure III

p::before {
  content: "\00002a test1\00000a \00002a test2\00000a \00002a test3\00000a";
}

p {
  white-space: pre
}

.a::before {
  content: "\00002a test1\00000a \00002a test2\00000a \00002a test3\00000a";
}

<p class='a'></p>

<p>
*test4&#10;*test5&#10;*test6&#10;
</p>

Answer 3

This is because all your content is inside one element. And with the pseudo-selector, you can only target the element, not its content.

let p = document.querySelector('p');
let res = document.querySelector('.res');
res.innerText = p.innerText;

<p>
  test
  <br> test2
  <br> test3
</p>

<div class="res"></div>

Answer 4

You'll need to wrap each of the lines of text. Depending on how you're implementing you can accomplish this in many ways. You could wrap them in individual

tags, or tags, or if it's a list consider and

tags. This will allow you to apply the CSS to each line.

p:before {
  content: "*";
}

p>br:after {
  content: "*";
}

<p>test</p>
<p>test2</p>
<p>test3</p>

Answer 5

You are missing one more ‘:’

So the css for this p would be something like:

p::before {
  content: "*";
}
p:before {
  content: "*";
}

Answer 6

You can go around that by using span inside the paragraph and apply the css to the span not to the paragraph

<p>
<span>test</span><br>
<span>test2</span><br>
<span>test3</span>
</p>

And the css will be

Span:before { content: "*"; }

Otherwise, you have to use JS to add the *

https://jsfiddle.net/mudxwjb7/#&togetherjs=rqDkfcBgKH