标签:大事记 alt function 新闻 css 没有 元素 添加 sof
我不知道有没有小伙伴以前跟我一样,在一个元素内部想要添加一个小图标或者小东西的时候,
直接在HTML文档里自己加上<span>标签,或者其他的。亦或者用javascript在该元素中追加一个元素.
比如我们向下面这些div中添加b元素;
<div></div>
<div></div>
<div></div>
<div></div>
$(function){
$("div").append("<b>Hello</b>");
}
结果:<div><b>Hello</b>
</div>
<div><b>Hello</b>
</div>
<div><b>Hello</b>
</div>
<div><b>Hello</b>
</div>
而 CSS伪类:before;
div:before{content:"●";width:5px;height:5px;left:169px;top:2px;}
注:content :是一个属性,值为信息。(可以为符号,文字);
实例:
html:
<div class="left">
<ul>
<li><a href="#">品牌简介</a></li>
<li><a href="#">品牌结构</a></li>
<li><a href="#">品牌定义</a></li>
<li><a href="#">品牌文化</a></li>
<li><a href="#">新闻动态</a></li>
<li><a href="#">联系方式</a></li>
<li><a href="#">大事记</a></li>
</ul>
</div>
CSS:
.left{width:175px;}
.left ul{padding-top:20px;border-right:1px dashed #333;}
.left ul li>a{position:relative;display:block;width:175px;text-align:center;font-size:16px;line-height:45px;}
.left ul li>a:hover:before{position:absolute;content:"●";width:5px;height:5px;left:169px;top:2px;}
.left ul li>a:hover{color:red;}
结果:
今天做项目用了CSS伪类选择器“before”,就来了解了解它怎么使用,又如何用?
标签:大事记 alt function 新闻 css 没有 元素 添加 sof
原文地址:http://www.cnblogs.com/hcweb/p/7396070.html