CSS 标签 :before 和 :after
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24741498/
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
CSS label :before and :after
提问by Liondancer
I am learning CSS and I am having a bit of trouble recognizing properties and understanding some of the syntax. in the CSS below.
我正在学习 CSS，但在识别属性和理解某些语法时遇到了一些麻烦。在下面的 CSS 中。
.tabs nav li.tab-current:before,
.tabs nav li.tab-current:after {
}
I understand that tabs is a class and the nav liwith the class tab-currentwithin the tabsclass in html will be applied with the same CSS.
我知道选项卡是一个类，并且htmlnav li类tab-current中的tabs类将使用相同的 CSS。
Example:
例子：
<div class="tabs">
<nav>
<ul>
<li class="tab-current">Hey</li>
<li>hello</li>
</ul>
</nav>
</div>
However I'm not quite sure what :beforeand :afterrepresent. Could someone provide me with an example? Thank you
但是我不太知道什么:before和:after代表。有人可以为我提供一个例子吗？谢谢
回答by lante
They set something after and before the element you are selecting. For example:
他们在您选择的元素之后和之前设置了一些东西。例如：
p:after {
content: 'hi! im after';
}
p:before {
content: 'hi! im before';
}
You will understand it better if you see this fiddle.
如果你看到这个小提琴，你会更好地理解它。
回答by Adjit
:beforeand :aftercreate pseudo elements as 'children' for the element they are applied to. They are often used for certain stylings, or error messages.
:before并:after为它们所应用的元素创建伪元素作为“子元素”。它们通常用于某些样式或错误消息。
Fiddle: http://jsfiddle.net/XjUM8/1/
小提琴：http: //jsfiddle.net/XjUM8/1/
div:before {
content: "Before";
background: red;
}
div:after {
content: "After";
background: blue;
color: white;
}
You can also set them up to show up on hover
您还可以将它们设置为在悬停时显示
Fiddle : http://jsfiddle.net/XjUM8/2/
小提琴：http: //jsfiddle.net/XjUM8/2/
div:hover:before {
content: "Before";
background: red;
}
div:hover:after {
content: "After";
background: blue;
color: white;
}
回答by Pierre-Adrien Buisson
:afterand :beforeare called pseudo-elements. They're used to inject some content to your DOM through the CSS.
:after并且:before被称为伪元素。它们用于通过 CSS 向 DOM 注入一些内容。
For instance, say you want to add an icon after every link that targets external websites (we'll assume that these links href all begin with "http://"). This would be a real pain in the neck to try and append this manually. Using the CSS pseudo-element :after, you can simply do something like this :
例如，假设您想在每个指向外部网站的链接后添加一个图标（我们假设这些链接 href 都以“http://”开头）。尝试手动附加它会很痛苦。使用 CSS 伪元素:after，您可以简单地执行以下操作：
a[href^="http://"]:after {
content:url('href.png');
}
and bam ! You're good to go.
砰！你很高兴去。
:afterand :beforeallow you to simply inject some text or image, but they can also be used in many creative ways.
:after并:before允许您简单地注入一些文本或图像，但它们也可以以多种创造性的方式使用。
Beware though, they can be applied to anything except "replaced elements" : this means that you won't be able to use those pseudo-elements on tags such as <input>, <textarea>, <object>, <img>, etc.
要小心的是，他们可以应用到任何东西，除了“替换元素”：这意味着你将无法使用这些伪元素的标记，如<input>，<textarea>，<object>，<img>，等。
回答by ntgCleaner
:beforeand :afterare CSS Selectors that allow you to add content before or after the element in question. An example is of adding an arrow after a link to show progress:
:before和:after是 CSS 选择器，允许您在相关元素之前或之后添加内容。一个例子是在链接后添加一个箭头来显示进度：
HTML
HTML
<div class="testAfter"><a>Arrow After this link</a></div>
<div class="testBefore"><a>Arrow Before this link</a></div>
CSS
CSS
.testAfter:after{
content:"B6"
}
.testBefore:before{
content:"C0"
}
Fiddle to show: http://jsfiddle.net/yPkVL/1/
小提琴显示：http: //jsfiddle.net/yPkVL/1/
You can add all kinds of things; images, text, etc. You can style them and add different positionings. You can do all kinds of things. It's like adding an extra div before or after the div in question without having to change the HTML markup.
你可以添加各种东西；图像、文本等。您可以设置它们的样式并添加不同的定位。你可以做各种各样的事情。这就像在有问题的 div 之前或之后添加一个额外的 div 而不必更改 HTML 标记。
Reference:
参考：
回答by Anindya Basu
The W3School explains it pretty well, did you read that up and not understand something?
该W3School解释了它相当不错，你读了起来，不懂的东西？
Essentially what it means is you're going to insert whatever is in the :before area before what content is already in there, and the :after after the content.
本质上，这意味着您将插入 :before 区域中已有内容之前的任何内容，以及内容之后的 :after 区域。
:before and :after are selectors, they're used to select what you want to style.
:before 和 :after 是选择器，它们用于选择你想要的样式。
The example on w3schools is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
p::before
{
content:"Read this -";
}
</style>
</head>
<body>
<p>My name is Donald</p>
<p>I live in Ducksburg</p>
<p><b>Note:</b> For ::before to work in IE8, a DOCTYPE must be declared.</p>
</body>
</html>
What this does is print out:
Read this - My name is Donaldand Read this - I live in Duksburg
这样做是打印出来：
Read this - My name is Donald和Read this - I live in Duksburg
After will esentially do the same thing.
之后基本上会做同样的事情。
There are
有
