加入收藏 | 设为首页 | 会员中心 | 我要投稿 我爱故事小小网_铜陵站长网 (http://www.0562zz.com/)- 视频终端、云渲染、应用安全、数据安全、安全管理!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

CSS的content属性

发布时间:2023-12-27 13:45:49 所属栏目:语言 来源:DaWei
导读: 这篇文章小编给大家分享的是CSS的content属性的相关使用,content属性一般用于::before、::after伪元素中,用于呈现伪元素的内容。很多时候,content属性值我们用的最多的就是给个纯字符,其
这篇文章小编给大家分享的是CSS的content属性的相关使用,content属性一般用于::before、::after伪元素中,用于呈现伪元素的内容。很多时候,content属性值我们用的最多的就是给个纯字符,其实它还有很多值可供选择文中示例介绍的很详细,感兴趣的朋友可以了解看看,下面让我们一起来学习一下吧!

1、插入纯字符

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    li{list-style: none;}
    .content{
        position: relative;padding: 10px;
        border: 1px solid #666;margin: 10px;
    }
    .content.only-text::before{
        content: '插入纯字符';
    }
</style>

<body>
    <h1>1、插入纯字符</h1>
    <div class="content only-text"></div>
</body>

2、插入图片

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    li{list-style: none;}
    .content{
        position: relative;padding: 10px;
        border: 1px solid #666;margin: 10px;
    }
    .content.fill-image::before{
        content: url('https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png');
    }
</style>

<body>
    <h1>2、插入图片</h1>
    <div class="content fill-image"></div>
</body>

3、插入元素属性

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    li{list-style: none;}
    .content{
        position: relative;padding: 10px;
        border: 1px solid #666;margin: 10px;
    }
    .content.fill-dom-attr::before{
        content: attr(data-title);
    }
</style>

<body>
    <h1>3、插入元素属性</h1>
    <div class="content fill-dom-attr" data-title="我是.fill-dom-attr元素的 data-title 属性值"></div>
</body>

4、插入当前元素编号(即当前元素索引)

这个特性可用于活动页面的规则介绍。
    
<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    li{list-style: none;}
    .content{
        position: relative;padding: 10px;
        border: 1px solid #666;margin: 10px;
    }
    .fill-dom-index li{
        position: relative;
        /* 给计数器加器起个名字,它只会累加 li 标签的索引,li元素中间的div并不会理会 */
        counter-increment: my;
    }
    .fill-dom-index li div::before{
        /* 使用指定名字的计算器 */
        content: counter(my)'- ';
        color: #f00;
        font-weight: 600;
    }
</style>

<body>
    <h1>4、插入当前元素编号(即当前元素索引)</h1>
    <div class="content fill-dom-index">
        <ul>
            <li><div>我是第1个li标签</div></li>
            <div>我是li标签中的第1个div标签</div>
            <li><div>我是第2个li标签</div></li>
            <li><div>我是第3个li标签</div></li>
            <div>我是li标签中的第2个div标签</div>
            <li><div>我是第4个li标签</div></li>
            <li><div>我是第5个li标签</div></li>
        </ul>
    </div>
</body>

关于CSS的content属性的使用就介绍到这,上述示例具有一定的借鉴价值,感兴趣的朋友可以参考,希望能对大家有帮助。

(编辑:我爱故事小小网_铜陵站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章