How to use css before and after pseudo classes? | SoloLearn: Learn to code for FREE!

+16

How to use css before and after pseudo classes?

I am trying to use :before and :after but it is not working without postion absolute 🤦. Can someone give me a basic idea about it https://code.sololearn.com/WYGZns79e62w/?ref=app. I searched in question answer field already

20 Answers

New Answer

+11

Please note that you can use (:)single colon or (::)double colon for pseado element before, after. Every browser that supports the double colon (::) CSS3 syntax also supports just the (:) syntax, but IE 8 only supports the single-colon, so for now, it’s recommended to just use the single-colon for best browser support. :: is the newer format intended to distinguish pseudo content from pseudo-selectors. If you don’t need IE 8 support, feel free to use the double-colon.

+9

Pikachu(you must heard my name) It can be sometimes used instead of JavaScript! If someone doesn't know JavaScript he/she can use variables of css, calc function and these pseudo classes

+7

Calviղ Woww!! Great explanation 👍😀 👏👏👏👏👏 Thanks!

+5

It requires double colon! You can get very good and detailed videos about it on YouTube https://youtu.be/zGiirUiWslI https://youtu.be/-bwR9S5MmOI preferred: https://youtu.be/OtBpgtqrjyo

+5

For pseado element with position absolute, because of position absolute makes elements do not behave like block level elements, thus width and height able to define its dimension.

+5

Calviղ do you meant pusedo elements by default are inline instead of block?

+5

Abhay yes, it's inline with its own element and pseodo element of the same element.

+4

Namit Jain i know it bro but why we need to use position absolute???

+4

I added the code now you can check

+4

+2

+2

I have already said that :: (double colon) comes with psuedo classes

+2

You cannot see any background color on pseodo element without defined position absolute, due to the reason pseodo element by default is inline level element, it would not be affected by width and height, with empty content: "";, no background color can display. However the background color does exist, if you set some content on pseodo element, you would see the background color with the content. Check out the modified code by adding content: "before"; https://code.sololearn.com/W9wMVwExv3s6/?ref=app

+1

Before and After pseudo elements explained https://m.youtube.com/watch?v=zGiirUiWsl

+1

We should put ,make a class like x and then write x::before hope that helps

+1

Pikachu(you must heard my name) Postion:absolute is used for viewport For eg:you made a page and you want it scroll and not going in out of the border in case we use postion:absolute

+1

How can i fix a flood wait error when adding a user to a telegram group in python [This seems off-topic. Please refrain from attempting to hijack threads.]

0

-1

Namit Jain you are right

-4

The content should be single colon not double now check