In this example, as you can see, " p:first-child::before " does not work. Is there a way to have two p elements without using .classes? I would like to only use before and after pseudo elements with first-child, last-child or nth-child so I can have a content added before the first p element and have a content added after the second
element. Here is the code I'm using and the outcome I would like.
I can't get the ::before pseudo element to show the "Hi, " content at the same time that the ::after is being used on the second p element. Am I doing it wrong or it's just not possible with those pseudo element and class elements together? Thank you in advance.
<html>
<head>
<style>
p:first-child::before {
content: "Hi, ";
}
p:last-child::after {
content: " and I like it";
}
</style>
</head>
<body>
<h1>Demo of the ::before selector</h1>
<p>My name is Donald</p>
<p>I live in Ducksburg</p>
</body>
</html>
The outcome I would like is this:
Hi, My name is Donald
I live in Duckburg and I like it
The outcome I get is this:
My name is Donald
I live in Duckburg and I like it