CSS3 利用伪元素(::before)获取标签自定义属性(data-XX)的值

最新推荐文章于 2024-04-18 11:26:54 发布

原创最新推荐文章于 2024-04-18 11:26:54 发布 · 1.2w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html5 #css

CSS 同时被 3 个专栏收录

65 篇文章

订阅专栏

HTML5

54 篇文章

订阅专栏

CSS3

33 篇文章

订阅专栏

本文介绍了一个简单的HTML页面示例，其中使用了CSS伪元素:before来显示span标签的data-text属性值。此技巧能够帮助开发者更好地理解如何利用CSS伪元素实现特定样式效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo.html：

<!DOCTYPE html>          
<html lang="en">          
<head>          
    <meta charset="UTF-8">          
    <title>Document</title>          
    <style>  
        span {  
            border: 1px solid #000;  
        }  
  
        span::before {  
            content: attr(data-text);   /* 伪元素通过attr()获取标签自定义属性的值 */  
        }  
  
    </style>          
</head>          
<body>              
    <span data-text="aaa">bbb</span>      <!-- data-text标签自定义的属性 -->
</body>          
</html>