Html CSS 中的 &::before 和 &::after 是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26760776/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is &::before, &::after in CSS?
提问by kkakroo
I wanted to create a vertical timeline and I came across this page.
我想创建一个垂直的时间线，我遇到了这个页面。
http://cssdeck.com/labs/oz2nu681
http://cssdeck.com/labs/oz2nu681
I copied the code and there are some things which I am having trouble with.
我复制了代码，但有些事情我遇到了麻烦。
- &::after
- &::before
- .radio:checked; & + .relative;
- ＆：：后
- ＆：：前
- .radio：已检查；& + .relative;
I tried to change it into that stylesheet code but got stuck here. Also the CSS code is different than what a traditional CSS file contains. What is this code and how do i use it?
我试图将其更改为该样式表代码，但被卡在这里。此外，CSS 代码与传统 CSS 文件包含的内容不同。这是什么代码，我如何使用它？
回答by Adam
&::afteris actually nothing in CSS, but it is a feature of SASS/SCSS and is probably written in a context like this:
&::after实际上在 CSS 中什么都不是，但它是 SASS/SCSS 的一个特性，可能是在这样的上下文中编写的：
li {
/* some style 1 */
&::after {
/* some style 2 */
}
}
Which compiles to:
编译为：
li { /* some style 1 */ }
li::after { /* some style 2 */ }
Basically, the ampersand in SASS pulls in the parent selector when it compiles to CSS.
基本上，SASS 中的 & 符号在编译为 CSS 时会拉入父选择器。
EDITYou can't use the ampersand in a .cssfile, as it has no meaning, you can only use it in sass/scss files that are compiled to CSS using a SASS pre-processor.
编辑您不能在.css文件中使用＆符号，因为它没有意义，您只能在使用 SASS 预处理器编译为 CSS 的 sass/scss 文件中使用它。
Blog post (not mine) about ampersand in SASS:
关于 SASS 中的＆符号的博客文章（不是我的）：
http://www.joeloliveira.com/2011/06/28/the-ampersand-a-killer-sass-feature/
http://www.joeloliveira.com/2011/06/28/the-ampersand-a-killer-sass-feature/
EDIT 2Further answers:
编辑 2进一步的答案：
Everything else is vanilla CSS, ::after, ::beforeare pseudo elements, .relativeand .radioare class selectors, :checkedis a pseudo classfor input types radio and checkbox, and +is an adjacent sibling selector
一切是香草CSS， ::after，::before是伪构件，.relative并且.radio是类选择，:checked是一个伪类输入类型的无线电和复选框，+是相邻的兄弟选择器
MDN should be (one) of your authorities for CSS documentation, so I chose to link to their pages rather than simply copy and paste the contents of their documents into this answer.
MDN 应该是 CSS 文档的（一）权威，所以我选择链接到他们的页面，而不是简单地将他们的文档内容复制并粘贴到这个答案中。
EDIT 3
编辑 3
I realized I didn't specifically state what & + .relativeis.
我意识到我没有具体说明是什么& + .relative。
I alluded to it initially when I said
我最初提到它时我说
the ampersand in SASS pulls in the parent selector when it compiles to CSS
SASS 中的 & 符号在编译为 CSS 时拉入父选择器
In the OPs linked example there is this code:
在 OPs 链接的例子中有这个代码：
.radio:checked
& + .relative
label
... some styles here
When you consider that & pulls in the parent selectoryou'll see compiled CSS as this:
当你考虑到& pulls in the parent selector你会看到编译后的 CSS 是这样的：
.radio:checked + .relative label { ... some styles here }
In "plain english", if you will:
在“普通英语”中，如果您愿意：
An element with a class of radio that is checked with an immediate adjacent sibling element that has a class of relative and a child of that element with a tag name of label.
具有radio 类的元素，该元素与具有relative 类的直接相邻的同级元素和该元素的子代（标签名称为label）进行检查。
