码迷,mamicode.com
首页 > Web开发 > 详细

今天做项目用了CSS伪类选择器“before”,就来了解了解它怎么使用,又如何用?

时间:2017-08-19 14:15:50      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:大事记   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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!