CSS content属性

📌 相关文章

📜 CSS content属性

📅 最后修改于: 2020-11-05 04:31:33 🧑 作者: Mango

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

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

句法

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

属性值

此CSS属性具有下表中定义的许多值：

Values	Description
normal	It is used to set the default value
none	This value does not set the content.
counter	It sets the content as the counter. It is generally a number. It is displayed by using the counter() or counters() function.
string	It is used to set any string value. It should always be enclosed within quotation marks. It generates any string after or before the HTML element.
attr	It inserts the value of the specified attribute after or before the element. If the selector does not have a particular attribute, then an empty string will be inserted.
open-quote	It is used to insert the opening quotation mark, or it sets the content to be an opening quote.
close-quote	It is used to insert the closing quotation mark, or it sets the content to be a closing quote.
no-close-quote	If the closing quotes are specified, then it is used to remove the closing quote from the content.
no-open-quote	If the opening quotes are specified, then it is used to remove the opening quote from the content.
url	It is used to set the content to some media, which could be an image, video, audio, and many more.
Initial	It is used to set the property to its default value.
Inherit	It inherits the property from its parent element.

让我们看看此CSS属性的一些插图。

示例-使用正常值和无值

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

 
 
 
     
        CSS content Property 
     
     
 
  
 
     CSS content property  
     Use of content: normal; and content: none;  
     to the javaTpoint.com  
     This is a paragraph using normal value.  
     This is another paragraph using none value.

输出量

示例-使用字符串和url值

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

 
 
 
     
        CSS content Property 
     
     
 
  
 
     CSS content property  
     Use of content: string; and content: url();  
     to the javaTpoint.com  
     This is a paragraph using the url() value.  
     This is another paragraph using the url() value.

输出量

示例-使用开引号和闭引号值

我们不能在没有引号的情况下应用引号。

 
 
 
     
        CSS content Property 
     
     
 
  
 
     CSS content property  
     Use of content: open-quote; and content: close-quote;  
     Welcome to the javaTpoint.com  
     This is another paragraph.

输出量

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

在此示例中，我们在段落元素上应用了打开引号和关闭引号，而在类为.para的段落上，我们应用了no-open-quote和no-close-quote。







     CSS content property  
     Use of content: no-open-quote; and content: no-close-quote;  
 Welcome to the javaTpoint.com 
 This is another paragraph

输出量

示例-使用attr()

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

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

 
 
 
     
        CSS content Property 
     
     
 
  

 CSS Content property 
 The following link is displayed by using the attr() 
    Click here!

输出量