CSS content 属性-代码号

CSS content 属性详解

概述

content 是 CSS 中一个非常有用的属性，它能够生成动态内容并与 ::before 和 ::after 伪元素配合使用。该属性获得所有主流浏览器的支持，常用于在网页中插入生成的内容。

语法结构

selector::before {
    content: normal | none | counter | string | attr(attribute-name) | open-quote | close-quote | no-close-quote | no-open-quote | url() | initial | inherit;
}

属性值详解

normal

设置默认值，等同于不设置内容。

none

不生成任何内容。

counter

将内容设置为计数器值，通常与 counter() 或 counters() 函数配合使用。

string

设置任何字符串值，需要使用引号包裹。可在 HTML 元素前后生成任意文本内容。

attr()

插入指定属性的值到元素前后。如果元素没有该属性，则插入空字符串。

open-quote

插入开始引号标记。

close-quote

插入结束引号标记。

no-close-quote

移除已设置的结束引号。

no-open-quote

移除已设置的开始引号。

url()

设置内容为媒体资源，可以是图像、视频或音频等。

initial

将属性重置为默认值。

inherit

从父元素继承该属性值。

应用示例

示例 1：使用 normal 和 none 值

<!DOCTYPE html>
<html>
<head>
    <title>CSS content 属性教程 - 代码号编程学习</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }
        p {
            font-size: 18px;
            color: #333;
        }
        p::before {
            content: "欢迎访问 ";
            color: #1e88e5;
            font-weight: bold;
        }
        
        .normal-demo::before {
            content: normal;
        }
        
        .none-demo::before {
            content: none;
        }
    </style>
</head>
<body>
    <h1>CSS content 属性应用</h1>
    <h2>normal 和 none 值效果演示</h2>
    
    <p>代码号编程学习平台</p>
    <p class="normal-demo">此段落使用 normal 值，不显示前置内容。</p>
    <p class="none-demo">此段落使用 none 值，同样不显示前置内容。</p>
</body>
</html>

示例 2：使用字符串和 URL 值

<!DOCTYPE html>
<html>
<head>
    <title>字符串和URL值演示 - 代码号编程教程</title>
    <style>
        body {
            text-align: center;
            padding: 20px;
        }
        .content-box {
            border: 2px solid #1e88e5;
            padding: 20px;
            margin: 15px auto;
            max-width: 600px;
            border-radius: 8px;
        }
        
        .string-demo::before {
            content: "★ 前置内容：";
            color: #e53935;
            font-weight: bold;
        }
        
        .url-demo::before {
            content: url("https://www.ebingou.cn/biancheng/images/s1.jpg");
            margin-right: 10px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <h1>content 属性进阶应用</h1>
    
    <div class="content-box string-demo">
        此元素使用字符串值添加了前置星标和文本。
    </div>
    
    <div class="content-box url-demo">
        此元素使用 url() 值添加了前置小图标。
    </div>
</body>
</html>

示例 3：使用引号相关值

<!DOCTYPE html>
<html>
<head>
    <title>引号值应用 - 代码号编程学习</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .quote-demo {
            quotes: "“" "”" "‘" "’";
            margin: 20px 0;
            padding: 15px;
            background-color: #f5f5f5;
            border-left: 4px solid #1e88e5;
        }
        
        .quote-demo::before {
            content: open-quote;
            font-size: 24px;
            color: #1e88e5;
            vertical-align: top;
        }
        
        .quote-demo::after {
            content: close-quote;
            font-size: 24px;
            color: #1e88e5;
            vertical-align: bottom;
        }
        
        .no-quote-demo {
            margin: 20px 0;
            padding: 15px;
            background-color: #e8f5e9;
            border-left: 4px solid #43a047;
        }
        
        .no-quote-demo::before {
            content: no-open-quote;
        }
        
        .no-quote-demo::after {
            content: no-close-quote;
        }
    </style>
</head>
<body>
    <h1>引号值的应用示例</h1>
    
    <p class="quote-demo">
        这段文本使用了 open-quote 和 close-quote 值，自动添加了引号标记。
        在编程学习中，正确使用引号是非常重要的语法规则。
    </p>
    
    <p class="no-quote-demo">
        这段文本使用了 no-open-quote 和 no-close-quote 值，
        即使定义了引号也不会显示，适用于特殊排版需求。
    </p>
</body>
</html>

示例 4：使用 attr() 函数

<!DOCTYPE html>
<html>
<head>
    <title>attr()函数应用 - 代码号编程教程</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        
        .data-info {
            margin: 15px 0;
            padding: 12px;
            background-color: #fff3e0;
            border-radius: 6px;
            border: 1px solid #ffb74d;
        }
        
        .data-info::before {
            content: "数据属性: " attr(data-value);
            display: block;
            font-weight: bold;
            color: #f57c00;
            margin-bottom: 8px;
        }
        
        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted #1e88e5;
            cursor: help;
        }
        
        .tooltip:hover::after {
            content: attr(data-tooltip);
            position: absolute;
            left: 0;
            top: 100%;
            background: #333;
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            white-space: nowrap;
            z-index: 100;
        }
    </style>
</head>
<body>
    <h1>attr() 函数的实用示例</h1>
    
    <div class="data-info" data-value="编程学习资源">
        这段内容演示了如何使用 attr() 函数获取元素的自定义属性值。
        在代码号编程教程中，我们经常使用数据属性来存储额外信息。
    </div>
    
    <div class="data-info" data-value="前端开发技术">
        另一个使用数据属性的示例，展示了如何动态显示元素的信息。
    </div>
    
    <p>将鼠标悬停在 <span class="tooltip" data-tooltip="这是提示文本">此处</span> 查看工具提示效果，这是使用 attr() 函数实现的。</p>
</body>
</html>

本节课程知识要点

content 属性必须与 ::before 或 ::after 伪元素配合使用
使用字符串值时必须使用引号包裹内容
attr() 函数可以获取元素的自定义数据属性值
引号相关值需要配合 quotes 属性一起使用
url() 值可以插入图像等媒体内容，但需要注意路径正确性
合理使用 content 属性可以增强页面的视觉效果和用户体验

浏览器兼容性

content 属性已被所有现代浏览器支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。在移动端浏览器中也有良好的支持表现。

总结

CSS 的 content 属性为网页内容生成提供了强大而灵活的能力。通过本教程的学习，您应该已经掌握了如何使用各种值来实现不同的效果。在实际项目中，合理运用这一属性可以创建出更加动态和交互性强的用户界面。

本文标签：

CSS content 属性