Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
873 views
in Technique[技术] by (71.8m points)

html - 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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...