how to insert content before each new line using CSS - 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
test2
test3
</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
*test5
*test6
</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: "*";
}