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

Question

I was looking at a couple Twitter Bootstrap templates and I saw that a lot of ::before and ::after were inserted before and after div tags.

Can anybody tell me what they are?

Answer 1

The ::before and ::after pseudo elements are for css and are in no way bootstrap specific.

A quick example of some of the stuff it can do is this:

Say you have a basic p element:

<p>Hello</p>

In your css, if you had this:

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

The p tag in html would now say:

HiHello

If it was

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

It would be:

HelloHi

This can be very useful if you're using it with things such as phone numbers, or e-mail addresses e.g

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

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

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

If you look at The shapes of CSS, you will see that it's used on the more complex shapes.

One thing that ::before and ::after have in common and MUST have to work, is the content attribute. If it doesn't have a content attribute it wont show up. Don't mistake this as having a blank content, though, as this will work provided you give it a height/width like any other element.

::before and ::after aren't the only Pseudo elements though, here is a list:

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

You can also double up on these elements:

For example:

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