Before and after pseudo-elements

HTML-CSS
1

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

2

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
3

Give the MDN docs a look

4

Hello
Thanks
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

5

This is going to be really helpful
Thanks

6

let me explain you with a good example
,EXAMPLE: HTML:

here is some good stuff


CSS:

p::before{
content’:HELLO’;
}
output:it will add the word HELLO before the paragraph
similarly if you use p::after {
content:‘goodbye’;
}
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
7

Thank you
I really have appreciated this