css content属性_CSS之前和之后CSS –如何使用content属性

最新推荐文章于 2024-06-24 20:07:37 发布

cumian8165

最新推荐文章于 2024-06-24 20:07:37 发布

阅读量886

点赞数

文章标签： java python css html javascript ViewUI

原文链接：https://www.freecodecamp.org/news/css-before-and-after-how-to-use-the-content-property/

版权

css content属性

The content property in CSS defines the content of an element. You may have heard that this property only applies to the ::before and ::after pseudo-elements. In this article, we'll explore various use cases for the content property, including outside of pseudo-elements.

CSS中的content属性定义元素的内容。您可能已经听说此属性仅适用于::before和::after伪元素。在本文中，我们将探讨content属性的各种用例，包括伪元素之外的用例。

先决条件 (Prerequisite)

Since the majority of the use cases for the content property involve pseudo-elements, I would suggest that you be familiar with how the ::before and ::after pseudo-elements work. Here is a great article to get you up to speed:

由于content属性的大多数用例都包含伪元素，因此我建议您熟悉::before和::after伪元素的工作方式。这是一篇很棒的文章，可帮助您快速入门：

CSS Pseudo-Elements - Before and After Selectors Explained
CSS伪元素-解释选择器之前和之后

接受值 (Accepted Values)

First, let's take a look at all of the accepted values of the content property.

首先，让我们看一下content属性的所有可接受值。

normal: This is the default value. Computes to none when used with pseudo-elements.
normal ：这是默认值。与伪元素一起使用时， none计算none内容。
none: A pseudo-element will not be generated.
none ：不会生成伪元素。
<string>: Sets the content to the string specified. This string can contain Unicode escape sequences. For example, the copyright symbol: \\000A9.
<string> ：将内容设置为指定的字符串。该字符串可以包含Unicode转义序列。例如，版权符号： \\000A9 。
<image>: Sets the content to an image or gradient using url() or linear-gradient().
<image> ：使用url()或linear-gradient()将内容设置为图像或渐变。
open-quote | close-quote: Sets the content to the appropriate quote character referenced from the quotes property.
open-quote | close-quote ：将内容设置为从quotes属性引用的适当的引号字符。
no-open-quote | no-close-quote: Removes a quote from the selected element, but still increments or decrements the nesting level referenced from the quotes property.
no-open-quote | no-close-quote ：从所选元素中删除引号，但仍会增加或减少从quotes属性引用的嵌套级别。
attr(*attribute*): Sets the content as the string value of the selected elements selected attribute.
attr(*attribute*) ：将内容设置为所选元素selected属性的字符串值。
counter(): Sets the content as the value of a counter, usually a number.
counter() ：将内容设置为一个counter的值，通常是一个数字。

串 (String)

One of the most basic examples would be the use of adding string content before or after an element. In this example, we'll add a link symbol before a link and add the URL for the link after it.

最基本的示例之一是在元素之前或之后添加字符串内容的用法。在此示例中，我们将在链接之前添加链接符号，并在链接之后添加链接的URL。

a::before {
	content: "\\1F517 ";
}
a::after {
	content: " (" attr(href) ")";
}

Notice the space after the Unicode character in the ::before pseudo-element and the before the first parenthesis in the ::after pseudo-element. This will create space between these and the parent element.

请注意::before伪元素中Unicode字符之后的空间，以及::after伪元素中第一个括号之前的空间。这将在这些元素和父元素之间创建空间。

Alternatively, you could add padding or margin to the pseudo-elements to add separation.

或者，您可以向伪元素添加padding或margin以添加分隔。

基本报价 (Basic Quotes)

With the content property, you can add quotes before and/or after elements. Now, in HTML we do have the <q> tag. This will also add quotes around its content. However, with the content property, we can have more control over the implementation.

使用content属性，可以在元素之前和/或之后添加引号。现在，在HTML中，我们有了<q>标记。这还将在其内容周围添加引号。但是，使用content属性，我们可以更好地控制实现。

Here is the most basic example of adding quotes:

这是添加引号的最基本示例：

You can accomplish this as well by using the HTML tag <q>. But maybe we want to style the quote differently. So let's only add the opening quote and not the ending quote. And let's also style the opening quote.

您也可以使用HTML标签<q>完成此操作。但是也许我们想对引号进行不同的样式设置。因此，我们仅添加开头引号，而不添加结尾引号。让我们还对开头的报价进行样式设置。

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

The result:

结果：

高级行情 (Advanced Quotes)

We can also specify where we do not want quotes. For example, you may be quoting someone who is quoting another person. So you would have quotes within quotes, which can get confusing to the reader.

我们还可以指定不希望使用引号的位置。例如，您可能引用的是引用其他人的人。因此，您可能会在引号内包含引号，这会使读者感到困惑。

In the CodePen below, we are using HTML <q> tags, then specifying which tags should not display the quotes.

在下面的CodePen中，我们使用HTML <q>标记，然后指定哪些标记不显示引号。

At first glance, you might think that we should just remove the <q> tag where needed. But by specifying where a quote should not be still increments or decrements the nesting level referenced from the quotes property.

乍一看，您可能认为我们应该只在需要的地方删除<q>标记。但是，通过指定不应该在何处使用引号，可以递增或递减从quotes属性引用的嵌套级别。

To explain this, we need to understand the quotes property. This is simply an "array" of characters that should be used when quoting. Here is an example:

为了解释这一点，我们需要了解quotes属性。这只是引用时应使用的字符“数组”。这是一个例子：

q {
  quotes: '“' '”' '‘' '’' '“' '”';
}

These are sets of quotes. The first set will be used for the top level of quotes. The second set will be used for the first nested quote. And the third set will be used for the second nested quote. And so on, if there were more sets included.

这些是引号集。第一组将用于顶级报价。第二组将用于第一个嵌套报价。第三组将用于第二个嵌套引用。依此类推，如果其中包含更多集合。

Now that we understand the quotes property, I can explain how the no-open-quote and no-close-quote properties work.

现在我们了解了quotes属性，我可以解释no-open-quote和no-close-quote属性如何工作。

For each level of quotes, we can assign different sets of characters to use for the quotes. By specifying where a quote should not be still increments or decrements the nesting level referenced from the quotes property.

对于每个引号级别，我们可以分配不同的字符集以用于引号。通过指定不应在何处使用引号，可以增加或减少从quotes属性引用的嵌套级别。

Take a look at the example below. You will see that the second level of quotes is skipped.

看下面的例子。您将看到第二级引号被跳过。

属性 (Attributes)

Attributes can be used to pass content from HTML into the CSS content property. We actually used this already in the link example where we used the href attribute to include the URL string as part of our content.

属性可用于将内容从HTML传递到CSS content属性。实际上，我们在链接示例中已经使用了该属性，在该示例中，我们使用href属性将URL字符串包含为内容的一部分。

A perfect use case for this is a tooltip. You can add a title attribute to an element in HTML to have a simple, built-in tooltip on hover. But to customize this, we can use a data attribute on our HTML tag and then use the content property to add a tooltip.

一个完美的用例是一个工具提示。您可以在HTML中的元素上添加title属性，以在悬停时提供简单的内置工具提示。但要对此进行自定义，我们可以在HTML标记上使用data属性，然后使用content属性添加工具提示。

In this example, we use the attribute data-tooltip from our HTML element to pass the value into our tooltip. For the pointer of the tooltip, we set the content to "", as content is required to render a ::before or ::after pseudo-element.

在此示例中，我们使用HTML元素中的属性data-tooltip将值传递到我们的工具提示中。对于工具提示的指针，我们将content设置为"" ，因为需要content来呈现::before或::after伪元素。

专柜 (Counters)

The counter() CSS function returns a string representing the current value of the named counter. In the following example we have an ordered list that we will add content using a counter.

counter() CSS函数返回一个字符串，该字符串代表命名计数器的当前值。在下面的示例中，我们有一个有序列表，将使用counter添加内容。

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

ol {
  counter-reset: exampleCounter;
}
li {
  counter-increment: exampleCounter;
}
li::after {
  content: "[" counter(exampleCounter) "] == ["
               counter(exampleCounter, upper-roman) "]";
}

Without getting too in-depth on the counter function, we have to first initiate the counter on the ol element. We can name this whatever we would like. Then we tell the counter to increment on each li element. And lastly, we set the content of the li::after.

在不深入了解counter功能的情况下，我们必须首先在ol元素上启动计数器。我们可以根据需要命名。然后，我们告诉计数器在每个li元素上递增。最后，我们设置li::after的content 。

Here's the result:

结果如下：

You could use this to customize content within each list item that needs a corresponding number. Or you could use this to customize the list item itself. For instance, you could remove the default numbering and implement a custom-styled numbering system.

您可以使用它来自定义每个列表项中需要相应编号的内容。或者，您可以使用它自定义列表项本身。例如，您可以删除默认编号并实现自定义样式的编号系统。

图片 (Images)

Images and gradients can be used with the content property. This is fairly straight-forward. Here is an example that uses both:

图像和渐变可以与content属性一起使用。这很简单。这是同时使用这两个示例：

For accessibility, there is also an option to add alternate text for the image. This feature is not fully supported though.

为了实现可访问性，还有一个选项可以为图像添加替代文本。但是，此功能不受完全支持。

content: url(//unsplash.it/200/200) / "Alternative Text Here";

Note: This is unsupported in Firefox, IE, and Safari. Also, the gradient does not work in Firefox.

注意：Firefox，IE和Safari不支持此功能。另外，渐变在Firefox中不起作用。

伪元素之外 (Outside of Pseudo Elements)

That's right! You can use the content property outside of the pseudo-elements ::before and ::after. Although, its use is limited and not fully compatible in all browsers.

那就对了！您可以在伪元素::before和::after之外使用content属性。虽然，它的使用受到限制，并且并非在所有浏览器中都完全兼容。

The most compatible use case would be replacement of an element.

最兼容的用例是替换元素。

<div id='replace'>
  codeSTACKr
</div>

#replace {
  content: url("<https://www.codestackr.com/logo_twoline_light.svg>");
  width: 100%;
}

Note: Replacement is not supported in IE.

注意：IE不支持替换。

结论 (Conclusion)

Most times you will see content: "" found in the ::before and ::after pseudo-elements. But the content property has many useful applications.

大多数时候，您会看到在::before和::after伪元素中找到的content: "" 。但是content属性具有许多有用的应用程序。

The best use in my opinion is to use it for updating bulk elements. If you want to add an icon before every link on your site, it would be much easier to add it through the content property than to add it to every element in the HTML document.

我认为最好的用法是用于更新批量元素。如果要在站点上的每个链接之前添加图标，则通过content属性添加它比将其添加到HTML文档中的每个元素要容易得多。

谢谢阅读！ (Thanks for reading!)

Thank you for reading this article. Hopefully, it has helped you to better understand how the content property works in CSS.

感谢您阅读本文。希望它可以帮助您更好地了解content属性在CSS中的工作方式。

I'm Jesse from Texas. Check out my other content and let me know how I can help you on your journey to becoming a web developer.

Subscribe To My YouTube
订阅我的YouTube
Say Hello! Instagram | Twitter
问好！ Instagram | 推特
Sign Up For My Newsletter
订阅我的时事通讯

翻译自: https://www.freecodecamp.org/news/css-before-and-after-how-to-use-the-content-property/

css content属性

cumian8165

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css content属性_CSS之前和之后CSS –如何使用content属性

css content属性The content property in CSS defines the content of an element. You may have heard that this property only applies to the ::before and ::after pseudo-elements. In this article, we'll explo...
复制链接

扫一扫