CSS 伪元素 使用参考
2024-10-21 15:54:32
伪元素可以做得事情是非常多的,详情大家可以参考这里 大放异彩的伪元素——可以做什么?
本篇主要讲两个伪元素:before
和:after
的几个要点:
1、:before
和:after
是加在元素的里面,也就是在元素里的最前面和最后面加一个伪元素,看图:
代码:
* {
margin:;
padding:;
}
.par {
width: 200px;
height: 50px;
padding: 20px;
border: 1px solid grey;
}
.par:before {
content:':before';
background-color: lightgreen;
}
.par:after {
content:':after';
background-color: lightblue;
}
HTML:
<div class="par">
<span>hello</span>
<span> world</span>
</div>
2、伪元素必须要设置content
属性,没有内容可以设置为content:''
,否则伪元素不起作用,不信你把前面例子的content
属性注释掉???
3、伪元素默认是内联(行内)元素,所以设置宽高是没有用的,当然加上了display:block
当然就可以设置宽高了,但是因为是块状元素自然也就独占一行了,还想再同一行做块状元素?display:inline-block;
4、不是所有元素都可以加伪元素的,像input
,textarea
就不行,有的浏览器还不支持img
和select
5、IE8 无法在伪元素上设置透明度!虽然网上流传了各种版本的IE filter:alpha(opacity=0.5)
,但是本人亲测不行,最后还是在stackoverflow
上找到了答案,详情可以点击这里 Is there a way to make IE8 honour opacity on an `:before` pseudo element?
6、伪元素不行,直接在前后加 span
嘛,不要死扛~
行文仓促,如有错误,欢迎批评指正~~~
最新文章
- eclipse启动tomcat, http://localhost:8080无法访问
- python之路八
- 51nod 1158 全是1的最大子矩阵
- Java基础-字面值
- Linux系统中“动态库”和“静态库”那点事儿【转】
- 使用jvisualvm.exe 的Btrace插件监控应用程序
- DevExpress GridControl 使用方法技巧 总结 收录整理
- 出栈入栈动画demo
- 【转】GitHub删除一个仓库&mdash;&mdash;2013-08-27 21
- [LeetCode]题解(python):128-Longest Consecutive Sequence
- VC 2005 解决方案的目录结构设置和管理
- iOS 开发者旅途中的指南针 - LLDB 调试技术
- 今天打补丁出问题了,害得我组长被扣了1k奖金。
- Eclipse中删除tomcat server 导致不能重新创建该版本的tomcat server
- hdu_1014(竟然真的还有更水的)
- FORM中调用JAVA组件
- 可达用户投资额的计算(Java)
- nginx学习笔记(三)
- 好书推荐计划:Keras之父作品《Python 深度学习》
- Windows 性能监视器的基本指标说明(CPU,内存,硬盘参数)