CODEWITHSUNDEEP
htmlcss
Thegree0ne
Thegree0ne

Reputation: 185

What do ::before and ::after mean?

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?

Upvotes: 16

Views: 19535

Answers (2)

Albzi
Albzi

Reputation: 15619

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! ';
}

Upvotes: 22

Mister Epic
Mister Epic

Reputation: 16743

They represent pseudo-elements, which you don't include directly in your markup, but are available to you to create some neat effects with CSS. You have mentioned ::before and ::after, and they represent pseudo-elements that appear, shockingly, before and after your elements.

The whole list is included below and should be fairly self-explanatory:

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

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

Note the use of the double-colon, which is consistent with the spec. Sometimes you will see pseudo-elements specified with a single colon, but that was only because we needed to support browsers that didn't understand the double-colon syntax.

Upvotes: 5

Related Questions