CSS content

此CSS属性会生成动态内容。它可以与伪元素
::before 和
::after 一起使用。所有浏览器均完全支持此CSS属性，该CSS属性用于将生成的内容插入网页中。

它将元素替换为生成的值。

语法

 content: normal | none | counter | string | attr | open-quote | close-quote | no-close-quote | no-open-quote | url | initial | inherit;

属性值

此 CSS属性具有许多值，它们分别是定义如下表：

值	说明
normal	用于设置默认值
none	此值不会设置内容。
counter	它将内容设置为计数器。通常是一个数字。使用 counter()或 counters()函数显示。
string	它用于设置任何字符串值。它应始终用引号引起来。它会在HTML元素之后或之前生成任何字符串。
attr	它将在元素之后或之前插入指定属性的值。如果选择器没有特定属性，则将插入一个空字符串。
open-quote	用于插入引号，或将内容设置为引号。
close-quote	用于插入右引号，或将内容设置为右引号。
no-close-quote	如果指定了右引号，则用于从内容中删除右引号。
no-open-quote	如果指定了开头引号，则用于从内容中删除开头引号。
url	它用于将内容设置为某些媒体，可以是图像，视频，音频等等。
initial	用于将属性设置为其默认值。
inherit	它从其父元素继承属性。

我们看看此CSS属性的一些说明。

示例-使用
normal 和
none 值

在此示例中，我们使用
:: before 伪元素在段落元素之前插入文本
" Welcome" 。文本不会被添加到我们在其中应用了
normal 和
none 值的那些段落元素。

 <!DOCTYPE html>
 <html>
 <head>
     <title>
         CSS content Property
     </title>
     <style>
     body {
         text-align: center;
     }
     p {
         font-size: 25px;
     }
     p::before {
         content: "Welcome ";
     }
     #para::before {
         content: normal;
     }
     #para1::before {
         content: none;
     }
     </style>
 </head>
 <body>
     <h1> CSS content property </h1>
     <h2> Use of content: normal; and content: none; </h2>
     <p> to the bianchenghao6.com </p>
     <p id="para"> This is a paragraph using <b>normal</b> value. </p>
     <p id="para1"> This is another paragraph using <b>none</b> value. </p>
 </body>
 </html>

输出

CSS content_https://bianchenghao6.com_【CSS 教程】_第1张

示例-使用
string和
url 值

在此示例中，文本
" Hello World。Welcome" 通过使用content属性和
:: before 伪元素添加。

 <!DOCTYPE html>
 <html>
 <head>
     <title>
         CSS content Property
     </title>
     <style>
     body {
         text-align: center;
     }
     p {
         font-size: 25px;
     }
     p::before {
         content: "Hello World. Welcome ";
     }
     #para::before {
         content: url("https://bianchenghao6.com/images/icon3.png");
     }
     #para1::before {
         content: url("https://bianchenghao6.com/images/icon3.png");
     }
     </style>
 </head>
 <body>
     <h1> CSS content property </h1>
     <h2> Use of content: string; and content: url(); </h2>
     <p> to the bianchenghao6.com </p>
     <p id="para"> This is a paragraph using the <b>url()</b> value. </p>
     <p id="para1"> This is another paragraph using the <b>url()</b> value. </p>
 </body>
 </html>

输出

CSS content_https://bianchenghao6.com_【CSS 教程】_第2张

示例-使用
open-quote和
close-quote值

如果不使用
close-quote，我们将无法应用
open-quote。

 <!DOCTYPE html>
 <html>
 <head>
     <title>
         CSS content Property
     </title>
     <style>
     body {
         text-align: center;
     }
     p {
         font-size: 25px;
     }
     p::before {
         content: open-quote;
     }
     p::after {
         content: close-quote;
     }
     </style>
 </head>
 <body>
     <h1> CSS content property </h1>
     <h2> Use of content: open-quote; and content: close-quote; </h2>
     <p> Welcome to the bianchenghao6.com </p>
     <p> This is another paragraph. </p>
 </body>
 </html>

输出

CSS content_https://bianchenghao6.com_【CSS 教程】_第3张

示例-使用
no-open-quote和
no-close-quote值

在此示例中，我们应用了在段落元素上，以及在类别为
.para 的段落上，使用
no-open-quote 和
close-quote 。

 <!DOCTYPE html>
 <html>
 <head>
     <style>
     body {
         text-align: center;
     }
     p {
         font-size: 25px;
     }
     p::before {
         content: open-quote;
     }
     p::after {
         content: close-quote;
     }
     p.para::before {
         content: no-open-quote;
     }
     p.para::after {
         content: no-close-quote;
     }
     </style>
 </head>
 <body>
     <h1> CSS content property </h1>
     <h2> Use of content: no-open-quote; and content: no-close-quote; </h2>
     <p> Welcome to the bianchenghao6.com </p>
     <p class="para"> This is another paragraph </p>
 </body>
 </html>

输出

CSS content_https://bianchenghao6.com_【CSS 教程】_第4张

示例-使用
attr()

attr()函数允许我们插入特定属性的值。如果相应的元素没有属性，则将返回一个空字符串。

在此示例中，屏幕上显示的链接是使用
attr()函数

 <!DOCTYPE html>
 <html>
 <head>
     <title>
         CSS content Property
     </title>
     <style>
     body {
         text-align: center;
     }
     a::after {
         content: attr(href);
     }
     </style>
 </head>
 <body>
     <h1> CSS Content property </h1>
     <h2> The following link is displayed by using the <b>attr()</b> </h2>
     <a href=https://bianchenghao6.com>Click here! </a> 
 </body> 
 </html>

输出

CSS content_https://bianchenghao6.com_【CSS 教程】_第5张

CSS word-spacing

CSS page-break-after