Before and after pseudo-elements

I need some explanation on how the ::after and ::before pseudocodes are used in css.
Kindly assist!!

pseudo elements not pseudocode. They let you attach additional things (text, shapes etc) to existing elements using CSS.

pseudo because they don’t exist in the HTML (and aren’t designed to be either interactive or be easily accessible using JS), they are purely visual. They might look like HTML elements when the page is rendered, but they are not.

What have you tried already? What do you currently understand or not understand about them?

1 Like

Give the MDN docs a look

Youve given me a basic understanding of the pseudo elements, that has really helped, let me now research more about them and wish me luck

This is going to be really helpful

let me explain you with a good example

here is some good stuff


output:it will add the word HELLO before the paragraph
similarly if you use p::after {
it will display goodbye after paragraph.
finally the output as whole will be like:
HELLO here is some good stuff goodbye(p::before and p::after works only around the paragraph here because we have selected only p tag with whatever style you add to it like background-color,font-size etc )

1 Like

Thank you
I really have appreciated this