CSS实例教程;使用:before和:after插入内容

css样式：

div {
    border: 1px solid #090;
    width:78px;
	height:59px;
	padding:3px;
	position:relative;
}

div:after{
	content:attr(id);
	display:block;
	color:#f00;
	font-weight:bold;
	position:absolute;
	top:0;
	right:0;
}

html代码：

<div id="test" title="idtitle" style="width:78px;">文字内容</div>

这里，我获取div的id值，当然也可以获取title，style的值，来看一下浏览器中的表现（ff3.6/4.0/7.0、chrome14、safari5、opera10.6、ie8）：

来看一下特殊的例子，那就是获取图片的属性值，目前只有opera支持，这一点，opera非常的给力，实现某些效果上，它可以节省大量的html代码。先来看我这里要实现的效果（opera10.5）：

默认情况下如左图所示，只有一张图片，当鼠标放到图片上面，显示图片的alt属性内的内容，并覆盖在图片的上面，如图2。

如果用content:attr(alt)非常容易实现，而且减少了结构。来看一下如何实现的：

css样式：

            div {
                border: 1px solid #090;
                width:78px;
				height:59px;
				padding:3px;
            }

            div img:hover{
            	box-shadow:0 0 3px #666;
            }
	    div img:hover:after{
		content:attr(alt);
		display:block;
		height:20px;
		line-height:20px;
		background:#666;
		opacity:0.8;
		margin-top:-20px;
		color:#fff;
		text-align:center;
		font-size:12px;
	    }

html代码：

<div><img src="d9.jpg" alt="图片标题" title="图片2" /></div>

插入项目编号，在css2中，只能使用list-style来实现，但是css3中，我们可以使用content来添加项目编号，而且功能更加强大。先来看一个简单的例子：

css样式：

		h1{
			counter-increment:mycounter;
		}
		h1:before{
			content:counter(mycounter);
		}

html代码：

	<h1>大标题</h1>
	<h1>大标题</h1>
	<h1>大标题</h1>

来看一下浏览器中的表现（ff3.6/4.0/7.0、chrome14、safari5、opera10.6、ie8）：

counter-increment:name;这句是设置编号的name，这个name可以随意，这里我使用的是mycounter。调用的时候使用content:counter(name);的形式。

上图中，数字后面直接跟标题，有点难看，我们

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!