css的content属性的具体使用

网页制作 2024/11/24 佚名

3 2 1

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>

5、插入当前元素编号(指定种类)

<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-index2 li{
        position: relative;
        counter-increment: my2;
    }
    .fill-dom-index2 li div::before{
        /* 第二个参数为list-style-type，可用值见： http://www.w3school.com.cn/cssref/pr_list-style-type.asp*/
        content: counter(my2,lower-latin)'- ';
        color: #f00;
        font-weight: 600;
    }
</style>

<body>
    <h1>5、插入当前元素编号(指定种类)</h1>
    <div class="content fill-dom-index2">
        <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属性

标签：

css,content属性

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“css的content属性的具体使用”

css的content属性的具体使用

暂无“css的content属性的具体使用”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

2024年11月24日

css的content属性的具体使用

css,content属性

通过CSS变量修改样式的方法示例

css加载会造成阻塞吗

评论“css的content属性的具体使用”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接