CSS syntax

HTML & CSS
1

confused in this syntax

.modal:before

Does it mean two separate class “modal” and “before” ?

If not , could you please explain with an example?

2

It’s one class (modal). Before means before the item wo which you apply the modal class.

3

what is wo ?

could you please explain with an example ? …its still confusing

4

It’s a typo! :grinning: Should be to, as in ‘to which…’!

5

so you mean …if I have two divs … if I apply modal:before in second div … result will be applied to first div ? ( since you said “before” )

6
7

thanks

8

It’s a “pseudo element”, that is where the css inserts a new element which does not exist in the html mark-up.
::before will insert the new elements before the targeted element and ::after will insert it after the elements.
Note the correct syntax is two colons, one colon is used for “pseudo classes”.

.modal::before {
  display: block;
  content: 'This is a pseudo element before the modal' ;
  background: #d00;
  color: #fff;
}

Because these pseudo elements do not exist in the html content they will generally be used for purely decorative or visual elements that you want to include without polluting the semantics of your html.

3 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.