侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 143953 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

css中伪元素before或after中content的特殊用法attr

2024-04-04 星期四 / 0 评论 / 0 点赞 / 4 阅读 / 1555 字

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body>

 

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <div class="box">        <span class="haorooms" name="开">开</span>        <span class="haorooms" name="源">源</span>        <span class="haorooms" name="中">中</span>        <span class="haorooms" name="国">国</span>    </div></body><style>    .haorooms {        position: relative;        display: inline-block;        font-size: 80px;        color: black;        overflow: hidden;        white-space: pre;    }        .haorooms:before {        display: block;        z-index: 1;        position: absolute;        top: 0;        left: 0;        width: 50%;        content: attr(name);        overflow: hidden;        color: #f00;    }</style></html>

 

广告 广告

评论区