Content Before first p [closed] - css

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
Before only in the first paragraph
I try to do the following:
.answer p::first-letter:before{
content:'A';
}
How could you achieve the desired result.
I try to place the content only in the first paragraph of the container, which I think is like this:
nswer p:first-child:before{
content:'R';}
But it does not respect the first paragraph, but instead includes it in others in the same container.

Answer 1

If you simply need to insert something before a <p> element, then there is no need to specify the ::first-letter pseudo selector. A simple :before is enough.
.container > p:first-child:before {
content: "A";
}
.container > p:not(first-child) {
text-transform: capitalize;
}
<div class="container">
<p>typical</p>
<p>typical</p>
<p>typical</p>
</div>
Codepen here.

Answer 2

CSS is very specific, it will alter what you are selecting. If you want to change something before the first <p> in your html you should try and find that in your html and write a css selector for that element i.e. is if a <div> what is the class name of that div - that is what you want to select with the css. Maybe create a div, add a class name to it, put your <p> into it and write css for that new class. Hope that makes sense.

Answer 3

Im not sure exactly what you mean, but if its just the first paragraph you want a :before on then just add the class to your first p;
<div>
<p class="first_paragraph">
This is paragraph 1
</p>
<p>
this is paragraph 2
</p>
</div>
then apply your content.
.first_paragraph:before {
content: 'A_1';
}
JSFiddle
Alternatively, if your content is dynamic and you cant apply the css.
Then you can use the first-child combined with the before.
.paragraph_list p:first-child:before {
content: 'A_1';
}
Second Example JSFiddle

Answer 4

You were close!
Try this:
.answer p:first-child:before{
content:'A';
}