CSS伪类:before 和 :after
2017-04-14 16:20
543 查看
CSS用了许久,对一些伪类熟视无睹,从不想着去搞清楚一下。比如说这个
其实,
对应的代码有:
图标正是
那究竟如何设置图标呢?关键在于
有关这个content属性,还可以对应许多内容,具体可参考
http://www.zhangxinxu.com/wordpress/2010/04/css-content%E5%86%85%E5%AE%B9%E7%94%9F%E6%88%90%E6%8A%80%E6%9C%AF%E4%BB%A5%E5%8F%8A%E5%BA%94%E7%94%A8/
如果想将这些插入内容去掉怎么办呢?比如说,伸缩搜索框,按钮未点击前有“查找”二字,点击后字消失:
代码就可以这样写:
将 content 设为”“,就啥都没有了。
源代码下载
:before :after
其实,
:before表示该标记前面的样式,反之
:after代表设置后面的样式。网页上常常看到有些文字前或后有小图标,用的就是这种样式:
对应的代码有:
<button type="button" class="btn text" onclick="Search();"><i class="icon-search"></i> 查询</button> <button type="button" onclick="clearSerach()" class="btn"><i class="icon-trash"></i> 清除</button>
图标正是
<i>这里设置出来的。众所周知,
<i>只是一个代表斜体的标记而已,之所以用在这里,只是看中它不占地方,方便设置
:before :after而已。
那究竟如何设置图标呢?关键在于
content这个CSS属性。
content代表插入内容,并且似乎常跟
:before :after配对使用。像上面这个例子,就可以是
.icon-search:before{ content: "\e000";/* 放大镜符号 */ font-size: 16px; }
有关这个content属性,还可以对应许多内容,具体可参考
http://www.zhangxinxu.com/wordpress/2010/04/css-content%E5%86%85%E5%AE%B9%E7%94%9F%E6%88%90%E6%8A%80%E6%9C%AF%E4%BB%A5%E5%8F%8A%E5%BA%94%E7%94%A8/
如果想将这些插入内容去掉怎么办呢?比如说,伸缩搜索框,按钮未点击前有“查找”二字,点击后字消失:
代码就可以这样写:
.sb-icon-search:before { content: "\e000"; } .sb-icon-search:after { content: "\20查\20找";/* \20 代表空格 */ color: #555; } .sb-search.sb-search-open .sb-icon-search:after, .no-js .sb-search .sb-icon-search:after { content: ""; }
将 content 设为”“,就啥都没有了。
源代码下载
相关文章推荐
- 前端(各种demo)一:css实现三角形,css实现梯形,pop弹层,css伪类before,after使用,svg使用(持续更新中)
- 伪类“:before”,“:after”和伪元素“::before”、“::after”-CSS生成内容
- CSS伪类(pseudo class)简明介绍之:before和:after
- CSS :before :after 伪类选择器
- CSS 属性 :before && :after的用法,伪类和伪元素的区别
- CSS伪类对象before和after的用法实例详解
- CSS伪类元素 :after :before
- css中伪类元素:before和:after
- CSS的伪类 :before 和 :after
- css中伪类 :before和:after
- [DIV/CSS] CSS 属性 :before && :after的用法,伪类和伪元素的区别
- css 中的伪类选择器before 与after
- CSS伪类:before 和 :after
- CSS伪类对象before和after的实例
- 用css伪类:before,:after前后插入线
- css伪类 :before和:after的使用
- css之伪类选择器:before :after(::before ::after)
- css的伪类:before 和 :after 的强大之处
- CSS基础-03 伪类,伪元素,before和after使用案例
- css伪类 :before和 :after的使用详解 以及实现的一些效果