CSS content属性用法及代码示例

CSS中的content属性用于动态生成内容(在运行期间)。它用于生成content::before&::after伪元素。

用法:

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

属性值：

normal:它设置默认值。如果content属性正常，则设置内容。

用法:

Element::before|after { 
    content:normal;
}

例：

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        CSS | content Property 
    </title> 
    <style> 
        p::before {  
            content:"Welcome "; 
        } 
          
        a::before {  
            content:normal; 
        } 
    </style> 
</head> 
  
<body> 
    <p>to GeeksforGeeks</p> 
    <p id = "a">you</p> 
</body> 
</html>

输出：

Welcome to GeeksforGeeks
Welcome you

none:它不会在伪元素之前和之后设置内容。

用法:

Element::before|after { 
    content:none;
}

例：

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        CSS | content Property 
    </title> 
    <style> 
        p::before {  
            content:"Hello"; 
        } 
          
        p#a::before {  
            content:none; 
        } 
    </style> 
</head> 
  
<body> 
    <p> GeeksforGeeks!</p> 
    <p id = "a">Welcomes to GeeksforGeeks!</p> 
</body> 
</html>

输出：

Hello GeeksforGeeks!
Welcome to GeeksforGeeks!

initial:它将属性设置为其默认值。

用法:

Element::before|after {
    content:initial;
}

例：

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        CSS | content Property 
    </title> 
    <style> 
        p::before {  
            content:"Welcome "; 
        } 
          
        a::before {  
            content:initial; 
        } 
    </style> 
</head> 
  
<body> 
    <p>to GeeksforGeeks</p> 
    <p id = "a">you</p> 
</body> 
</html>

输出：

Hello GeeksforGeeks!
Hello Welcomes to GeeksforGeeks!

attribute:它设置包含指定值的属性值。

用法:

Element::before|after { 
    content:attr(href); 
}

例：

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        CSS | content Property 
    </title> 
    <style> 
        a::after { 
            content:attr(href); 
        } 
    </style> 
</head> 
  
<body> 
    <a href= 
"https://www.geeksforgeeks.org/html-style-attribute/"> 
        Click Here! 
    </a> 
</body> 
</html>

输出：

Click Here! https://www.geeksforgeeks.org/html-style-attribute/

String:它用于在HTML元素之前和之后生成任何字符串。

用法:

Element::before|after { 
    content:string;
}

例：

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        CSS | content Property 
    </title> 
    <style> 
      
        /* string value used here */ 
        p::before {  
            content:"Hello"; 
        } 
    </style> 
</head> 
  
<body> 
    <p> GeeksforGeeks!</p> 
</body> 
</html>

输出：

Hello GeeksforGeeks!

open-quote:它在元素之前和之后生成开引号。

用法:

Element::before|after { 
    content:open-quote;
}

例：

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        CSS | content Property 
    </title> 
    <style> 
        p::before { 
            content:open-quote; 
        } 
    </style> 
</head> 
  
<body> 
    <p>Welcome to GeeksforGeeks!</p> 
</body> 
</html>

输出：

"Welcome to GeeksforGeeks!

close-quote:它在元素之前和之后生成一个结束语。

用法:

Element::before|after { 
    content:close-quote;
}

例：

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        CSS | content Property 
    </title> 
    <style> 
        p::after { 
            content:close-quote; 
        } 
        p::before { 
            content:open-quote; 
        } 
    </style> 
</head> 
  
<body> 
    <p>Welcome to GeeksforGeeks!</p> 
</body> 
</html>

输出：

"Welcome to GeeksforGeeks!"

no-open-quote：如果已指定，它将从内容中删除开引号。

用法:

Element::before|after { 
    content:no-open-quote;
}

例：

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        CSS | content Property 
    </title> 
    <style> 
        p::before { 
            content:open-quote; 
        } 
        p::before { 
            content:no-open-quote; 
        } 
    </style> 
</head> 
  
<body> 
    <p>Welcome to GeeksforGeeks!</p> 
</body> 
</html>

输出：

Welcome to GeeksforGeeks!

no-close-quote：如果指定了结束引号，它将从内容中删除。

用法:

Element::before|after { 
    content:no-close-quote;
}

例：

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        CSS | content Property 
    </title> 
    <style> 
        p::before { 
            content:open-quote; 
        } 
        p::after { 
            content:no-close-quote; 
        } 
    </style> 
</head> 
<body> 
    <p>Welcome to GeeksforGeeks!</p> 
</body> 
</html>

输出：

"Welcome to GeeksforGeeks!

inherit:此属性从其父元素继承。
用法:
```
Element::before|after { 
    content:inherit;
}
```

支持的浏览器：下面列出了受content属性支持的浏览器：

谷歌浏览器1.0
Internet Explorer 8.0
Firefox 1.0
Opera 4.0
Safari 1.0

相关用法

注：本文由纯净天空筛选整理自AkshayGulati大神的英文原创作品 CSS | content Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。