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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。