请选择 进入手机版 | 继续访问电脑版

数字之家

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: 活动 交友 discuz
查看: 116|回复: 1

CSS :before 选择器

[复制链接]
  • TA的每日心情
    开心
    2019-4-9 11:43
  • 签到天数: 8 天

    [LV.3]偶尔看看II

    357

    主题

    360

    帖子

    1681

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    1681
    admin实名认证 发表于 2019-4-12 20:10:05 | 显示全部楼层 |阅读模式
    在每个 <p> 元素的内容之前插入新内容:
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <style>
    5. p:before
    6. {
    7. content:"台词:";
    8. }
    9. </style>
    10. </head>

    11. <body>

    12. <p>我是唐老鸭。</p>
    13. <p>我住在 Duckburg。</p>

    14. <p><b>注释:</b>对于在 IE8 中工作的 :before,必须声明 DOCTYPE。</p>

    15. </body>
    16. </html>
    复制代码
    运行效果如下:
    dd.jpg
    maomivip@mail.com
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2019-4-9 11:43
  • 签到天数: 8 天

    [LV.3]偶尔看看II

    357

    主题

    360

    帖子

    1681

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    1681
     楼主| admin实名认证 发表于 2019-4-12 20:12:30 | 显示全部楼层
    我们也可以这样:在每个 <p> 元素前面插入内容,并设置所插入内容的样式:
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <style>
    5. p:before
    6. {
    7. content:"台词:";
    8. background-color:yellow;
    9. color:red;
    10. font-weight:bold;
    11. }
    12. </style>
    13. </head>

    14. <body>

    15. <p>我是唐老鸭。</p>
    16. <p>我住在 Duckburg。</p>

    17. <p><b>注释:</b>对于在 IE8 中工作的 :before,必须声明 DOCTYPE。</p>

    18. </body>
    19. </html>
    复制代码
    运行结果如下:
    cc.jpg
    maomivip@mail.com
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|赢创志诚旗下网站 ( 鲁ICP备19000917号 )

    GMT+8, 2019-4-21 22:14 , Processed in 0.059843 second(s), 24 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表