AtoZ CSS截屏视频：CSS伪元素

Loading the player…

正在加载播放器…

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.

该截屏视频是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。

成绩单 (Transcript)

Pseudo elements are elements on the page that aren’t found in the HTML code.

伪元素是页面上在HTML代码中找不到的元素。

They can be manipulated with any CSS that would be applied to any other element.

可以使用将应用于任何其他元素的任何CSS来操纵它们。

Two special pseudo elements – :before and :after can be used to generate content on the page from CSS and have many potential use cases.

两个特殊的伪元素– :before和:after可用于从CSS生成页面上的内容，并具有许多潜在的用例。

In this episode we’ll learn about:

在本集中，我们将了解：

• The five different pseudo elements
  五个不同的伪元素
• Generating content like text, images attribute values and counters from CSS
  从CSS生成文本，图像属性值和计数器之类的内容
• And how to make complex shapes with minimal markup
  以及如何以最小的标记制作复杂的形状

伪元素 (Pseudo Elements)

There are five pseudo elements in CSS:

CSS中有五个伪元素：

• :first-line

  :first-line

• :first-letter

  :first-letter

• :selection

  :selection

• :before

  :before

• :after

  :after

These are differentiated from pseudo classes with the double colon but are often written in CSS with a single colon for brevity.

这些与带有双冒号的伪类有所区别，但是为了简洁起见，通常使用CSS用单个冒号编写。

I’ve got a long blockquote of placeholder text here. I can change the color of the first line of text with :first-line which even holds true when the text reflows. I can create a drop cap by styling the :first-letter with float and a larger font-size. And I can change the color of selected text with :selection.

我在这里有很长的占位符文本的引用。 我可以使用:first-line更改文本第一行的color ，甚至在文本重排时也适用。 我可以通过使用float和更大的font-size样式:first-letter来创建:first-letter float 。 我可以使用:selection更改所选文本的color 。

I can add large quotation marks before and after the blockquote with the :before and :after pseudo elements. The text gets generated from the content property and can then be styled with CSS to get the desired effect.

我之前和后大加引号blockquote用:before和:after伪元素。 文本从content属性生成，然后可以使用CSS设置样式以获得所需的效果。

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;	
  padding: 1em 1em 1em 2em;
}
blockquote p: first-line {
  color: #cc3f85;
}
blockquote p: first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font- size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;
	
}
blockquote:before,
blockquote: after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

产生的内容 (Generated Content)

Using :before and :after pseudo elements allows us to add all sorts of different content to the page.

使用:before和:after伪元素使我们可以向页面添加各种不同的内容。

We’ve already seen how text content can be added to the page but we can also add images, attribute values, counters or an empty string to just provide access to the two extra elements.

我们已经了解了如何将文本内容添加到页面，但是我们还可以添加图像，属性值，计数器或空字符串以仅提供对两个额外元素的访问。

Adding an image is similar to adding a background-image with url(). Here, use url() as the value of the content property. I actually prefer to use background images and just provide access to the pseudo elements by creating an empty string for content. This gives more control over the image as all the usual properties like background-position, background-repeat and background-size become available.

添加图像类似于使用url()添加background-image 。 在这里，使用url()作为content属性的值。 我实际上更喜欢使用背景图像，只是通过为content创建一个空字符串来提供对伪元素的访问。 由于所有常规属性(例如background-position ， background-repeat和background-size可用，因此可以更好地控制图像。

li:before {
  content: url(star.png);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}

It’s possible to inject the value of a HTML attribute into the page using the content property too. When creating a print stylesheet, I like to add the following snippet to output the URL of links so they can be read from the page:

也可以使用content属性将HTML属性的值注入页面。 创建打印样式表时，我喜欢添加以下代码片段以输出链接的URL，以便可以从页面中读取它们：

a[href]: not([href*="#"]): after {
  content: attr(href);
}

This will add the link after the link text for any links that aren’t internal or hash links.

对于不是内部链接或哈希链接的任何链接，这将在链接文本之后添加该链接。

The final special case for generated content is to insert the value of a counter variable. I’ve found this useful in the past for numbering complex lists of legal terms and conditions.

生成内容的最后一种特殊情况是插入一个计数器变量的值。 过去，我发现这对于为法律条款和条件的复杂列表编号非常有用。

I’ve got a series of headings here with a series of nested lists beneath them. I want each section heading to have a number and each list item to be numbered as a sub-item of each section.

我在这里有一系列标题，下面有一系列嵌套列表。 我希望每个部分的标题都有一个数字，并且每个列表项都被编号为每个部分的子项。

For every h2 I’ll increment a “section” counter and for each list item, I’ll increment a “item” counter. Before each section heading, I’ll output the value of the section counter and before each list item, I’ll output the value of the item counter. Additional strings can be added between the counters to create a complex numbering system. A simplified form of this method could be used to control the styling of the numbers or bullets in lists.

对于每个h2我将增加一个“部分”计数器，对于每个列表项，我将增加一个“项目”计数器。 在每个节标题之前，我将输出节计数器的值，在每个列表项之前，我将输出项目计数器的值。 可以在计数器之间添加其他字符串，以创建复杂的编号系统。 此方法的简化形式可用于控制列表中数字或项目符号的样式。

h2 {counter-increment: section;}
ul {counter-reset: item;}
li {counter-increment: item;}

h2:before {
  content: counter(section) " - ";
}
li:before {
  content: counter(section) "." counter(item);
}

形状 (Shapes)

As each element on the page can have two “extra” elements and these can be styled however we like, it’s possible to make all sorts of complex shapes.

由于页面上的每个元素都可以具有两个“额外”元素，并且可以根据我们的喜好对其进行样式设置，因此可以制作各种复杂的形状。

When thinking for an example to demonstrate, I came across a reference of shapes on CSS-Tricks; one of them really stood out and I’m going to walk through the process of how it works. Let’s make the Yin-Yang symbol with a single element.

在考虑一个示例进行演示时，我遇到了CSS-Tricks上的形状参考。 其中一个真的很突出，我将逐步介绍它的工作过程。 让我们用单个元素制作阴阳符号。

.yin-yang {
  position: relative;
  width: 200px;
  height: 200px;
  border-style: solid;
  border-color: black;
  border-width: 4px 4px 100px 4px;
  background: #fff;
  border-radius: 100%;
}
.yin-yang: before,
.yin-yang: after {
  content: "";
  position: absolute;
  top: 50%;
  border-radius: 100%;
  width: 24px;
  height: 24px;
}
.yin-yang: before {
  background: white;
  left: 0;
  border: 36px solid black;
}
.yin-yang:after {
  background: black;
  left: 50%;
  border: 36px solid white;
}

Starting with box, this can be turned into a circle with border-radius. Two colored semi-circles can be created by using a border-bottom that equals the height of the circle. The two dots are created by making two more circles with pseudo elements and placing them with position:absolute. Using borders that match the color of the semi-circles, the two rounded ends of the symbol can be created. Pretty sweet if you ask me.

以box开头，可以将其变成具有border-radius 。 可以使用等于圆的height的border-bottom来创建两个彩色的半圆。 通过用伪元素再制造两个圆圈并将它们放置在position:absolute可以创建两个点。 使用与半圆的color匹配的边界，可以创建符号的两个圆形末端。 如果你问我，真是太好了。

I’m a big fan of using pseudo elements; you can do a lot with them and add all sorts of visual flair to the page without cluttering up the markup.

我非常喜欢使用伪元素。 您可以对它们进行很多处理，并在页面上添加各种视觉效果，而不会使标记混乱。

翻译自: https://www.sitepoint.com/atoz-css-pseudo-elements/