关于伪类元素:before和:after
来源:互联网 发布:js将base64转换为图片 编辑:程序博客网 时间:2024/05/22 19:26
:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下:
#example:before { content: "#"; color: red;}#example:after { content: "$"; color: red;}
这段代码会在#example元素内容之前插入一个'#',以及在内容之后添加一个'$',插入的行内元素是作为#example的子元素,效果如下:
#Here is the example content$
需要注意的是如果没有content属性,伪类元素将没有任何作用。但是可以指定content为空,同时正如前面所说,插入的内容默认是一个行内元素,并且在HTML源代码中无法看到,这就是为什么称之为伪类元素的理由,所以也就无法通过DOM对其进行操作。
需要注意的是如果没有content属性,伪类元素将没有任何作用。但是可以指定content为空,同时正如前面所说,插入的内容默认是一个行内元素,并且在HTML源代码中无法看到,这就是为什么称之为伪类元素的理由,所以也就无法通过DOM对其进行操作。
#example:before { content: ""; display: block; width: 100px; height: 100px;}
伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性,比如字体等。
除了插入文字内容,还可以指定其他内容:
p:before { content: url('img.jpg');}a:after { content: attr(href);}
attr()函数会返回指定元素对应属性的值
:before和:after的一些惊人用法
>. clearfix hack
如果父元素容器里面的子元素是浮动元素的话,我们一般需要在父元素闭合前添加一个clear:both的元素用于清除浮动从而能使父容器正常被子元素内容撑起,但是这种方法引入了多余的无意义标签,并且有javascript操作子元素的时候容易引发bug。一种更好的方法是利用CSS,所以在一些CSS文件中经常会看到类似于.clearfix这样的类出没,只要在父容器上应用这个类即可实现清除浮动。下面是利用:before和:after的一个实现:(viaNicolas Gallagher)
/* For modern browsers */.clearfix:before,.clearfix:after { content:""; display:table;}.clearfix:after { clear:both;}/* For IE 6/7 (trigger hasLayout) */.clearfix { zoom:1;}
>. CSS实现的八卦图案
#yin-yang { width: 96px; height: 48px; background: #eee; border-color: red; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative;}#yin-yang:before { content: ""; position: absolute; top: 50%; left: 0; background: #eee; border: 18px solid red; border-radius: 100%; width: 12px; height: 12px;}#yin-yang:after { content: ""; position: absolute; top: 50%; left: 50%; background: red; border: 18px solid #eee; border-radius:100%; width: 12px; height: 12px;}
- 关于伪类元素:before和:after
- 关于伪类元素:before和:after
- 关于伪类元素:before和:after
- 关于伪类元素:before和:after
- 关于伪类元素:before和:after
- 伪类元素:before 和 :after
- 伪元素:after和:before
- 伪元素::after和::before
- 伪元素::after和::before
- 伪元素::before和::after
- 伪元素::after和::before
- 伪元素::after和::before
- Before和:After伪元素
- 伪元素:before和:after
- 伪类“:before”,“:after”和伪元素“::before”、“::after”-CSS生成内容
- :before和:after伪类元素创造神奇效果
- 辛星浅析伪类元素before和after
- :before和:after伪类元素创造神奇效果
- 关于AndriodStudio导入问题—以Github开源代码SildingMenu为例
- hdu_5695_Gym Class(拓扑排序)
- (创建型模式)PROTOTYPE——原型模式
- ViewHolder重用机制 RecyclerView+CardView 优化
- 2016"百度之星" - 初赛(Astar Round2A) 1001 All X(数论知识)
- 关于伪类元素:before和:after
- 2016"百度之星" - 资格赛(Astar Round1)Problem C (tire树)
- 伟大的数学家马尔可夫,以及他对互联网的重要贡献
- MIT6.828 Lab2: 第2部分 Virtual Memory
- ios面试
- android之子线程中的Toast
- (行为型模式)TEMPLATE METHOD——模板方法模式
- poj2785题解
- 迪米特法则(LOD)——最少知识原则