Css content属性详解_css content f0dc-优快云博客

本文深入探讨了CSS中content属性的使用技巧，结合:before和:after伪对象，实现动态生成文本内容及交互效果，如鼠标悬停时显示链接路径。通过实例展示了如何优雅地在网页布局中融入动态与个性化元素。

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

http://www.xunzou.com/blog/post/615.html

Content作为css的一个属性，它可以和伪对象:before :after一起使用。

例如：

CSS

 
.xunzou:before {  
        content:"你好啊";  
        color:#F00;  
    }

html

 
<div class="xunzou">欢迎光临我的blog</div>

浏览器显示的应该是：

这里红色的文字，你好啊，由content生成

Content 的值还可以设置为元素的属性

例如：

CSS

 
.xunzou2:hover{position:relative;z-index:1} 
    .xunzou2:hover:after{ 
        content:attr(href); 
        padding:8px; 
        background:#DCDCDC; 
        -moz-border-radius:5px; 
        -webkit-border-radius:5px; 
        border-radius:5px; 
        position:absolute; 
        left:0; 
        top:150%; 
        z-index:2 
        white-space: nowrap; 
        -moz-box-shadow:2px 2px 5px #333; 
        -webkit-box-shadow:2px 2px 5px #333; 
        box-shadow:2px 2px 5px #333; 
    }

html

 
<a class="xunzou2" title="点击进入我的blog" >欢迎光临我的blog</a>

浏览器显示的应该是：

点此查看demo