What do :: before and :: after mean mean?

Question

I looked at several Twitter bootstrap patterns and I saw that a lot of ::before and ::after were inserted before and after the div tags.

Can anyone tell me what it is?

Answer 1

They are pseudo-elements that you do not include directly in your markup, but are available to you to create some neat effects using CSS. You mentioned ::before and ::after , and they are pseudo-elements that seem amazing before and after your elements.

A complete list is provided below and should be reasonably clear:

 ::after ::before ::first-letter ::first-line ::selection 

ref: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Note the use of a double colon, which is consistent with the specification. Sometimes you will see pseudo-elements defined by a single colon, but this was only because we needed to support browsers that did not understand the double-column syntax.

Answer 2

The pseudo-elements ::before and ::after for css and are not bootstrap specific.

A quick example of some of the things he can do is this:

Say you have a base element p:

 <p>Hello</p> 

In your css, if you have this:

 p::before{ content:'Hi'; } 

The p tag in html will now say:

 HiHello 

If it was

 p::after{ content:'Hi'; } 

This will:

 HelloHi 

This can be very useful if you use it with things like phone numbers or email addresses, for example,

 p.phone_number::before{ content:'Phone #: '; } 

<p class='phone_number'> now has Phone #: before it.

You can do so many things, even use it for styling.

If you look at CSS Forms , you will see that it is used for more complex forms.

One thing that has ::before and ::after , makes sense and MUST work, is the content attribute. If it does not have a content attribute, it will not appear. Make no mistake as it has empty content , though, since it will work if you give it height / width, like any other element.

::before and ::after are not the only elements of Pseudo, but here is the list:

 ::after ::before ::first-letter ::first-line ::selection 

You can also double these items:

For example:

 p:hover::before{ content:'Hovered! '; }