【转载】CSS 伪类-:before和:after

:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下:

#example:before {
    content: "#";
    color: red;
}

#example:after {
    content: "$";
    color: red;
}

这段代码会在#example元素内容之前插入一个‘#‘,以及在内容之后添加一个‘$‘,插入的行内元素是作为#example的子元素,效果如下:

Here is the example content

需要注意的是如果没有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()函数会返回指定元素对应属性的值

最后,奉上最惦记的浏览器支持情况

  • Chrome 2+,
  • Firefox 3.5+ (3.0 had partial support),
  • Safari 1.3+,
  • Opera 9.2+,
  • IE8+ (with some minor bugs),
  • Pretty much all mobile browsers.

放在伪类元素里面的内容一般都只是装饰性的,所以即便是IE6/7不支持也应该能降级到正常显示主体内容。

:before和:after的一些惊人用法

>. clearfix hack

如果父元素容器里面的子元素是浮动元素的话,我们一般需要在父元素闭合前添加一个clear:both的元素用于清除浮动从而能使父容器正常被子元素内容撑起,但是这种方法引入了多余的无意义标签,并且有javascript操作子元素的时候容易引发bug。一种更好的方法是利用CSS,所以在一些CSS文件中经常会看到类似于.clearfix这样的类出没,只要在父容器上应用这个类即可实现清除浮动。下面是利用:before和:after的一个实现:(via Nicolas 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;
}

【原文】http://www.hulufei.com/post/about-before-and-after-pseudo-element
时间: 2024-10-16 21:46:08

【转载】CSS 伪类-:before和:after的相关文章

:hover css伪类运用——转载自(隔叶黄莺 Unmi Blog)作为收藏

本文原始链接 http://unmi.cc/css-a-hover-js-over-out/, 来自 隔叶黄莺 Unmi Blog 原来做过一个在 html 表格中,当鼠标悬停在某行时,该行出行操作按钮,其他行的操作按钮隐藏.那时候的实现思想是当 onmouseover 在某行时,循环所有行,全隐藏掉按钮,再显示该行的.偶尔还得用下 onmouseourt 事件,现在想来这种实现会很影响页面效率的. 前几日看 WordPress 的后台列表,对相应记录的操作也使用了该功能,鼠标停在哪一行就只出现

CSS伪类和伪元素的区别

CSS - 伪类和伪元素的区别 本文转载于http://www.cnblogs.com/iceflorence/p/5796083.html 伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: CSS伪类 (Pseudo-classes):用于向某些选择器添加特殊的效果,即在元素当前静态样式的基础上添加特殊效果(一般都是动态效果),所以一个元素达到一个特定状态时,它

关于css伪类的一些兼容性测试

测试环境:xp ,ie7~8  chrome. link 伪类 :(:link,:visited)  这个是链接专用 动态伪类 :(:hover,:active,:focus) <!DOCTYPE html> <html> <head></head> <style type="text/css"> a:link,input:hover{color:blue;} a:visited{color:green;} a:active{

第十二节课,css伪类 (转)

一.特殊选择器 1.* 用于匹配任何的标记 2.> 用于指定父子节点关系 3.E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 4.E ~ F 匹配所有E元素之后的同级元素F 5.名称[表达式] 5.1 E[att] 匹配所有具有att属性的E元素([att]获取所有的定义了att的标签:E[att=val] 匹配所有att属性等于“val”的E元素: 5.2 [att=val] 获取所有定义了att属性并且属性值等于val的标签: 5.3 [att^=val]获取所有定义了att

【从0到1学Web前端】CSS伪类和伪元素

1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 selector.class : pseudo-class {property: value} 如下面的一段代码: a.red : visited {color: #FF0000} <a class="red" href="css_syntax.asp">CSS Syn

超链接标签的CSS伪类link,visited,hover,active

CSS伪类,是一种特殊的类,它针对到CSS选择器起作用,使选中的标签或元素产生特定的效果. CSS伪类的语法就是: 选择器 : 伪类名 { 属性 : 属性值 } 用的最多的伪类就是超链接a的伪类,有:link,:visited,:hover,:active,而且需要按照这个顺序设置,有个简单的记法是,取首字母组成 love hate,记住“爱恨”就行了. 1,  查看超链接a标签的默认样式 新建一个网页a.html,复制下面的内容: <html> <head> </head&

CSS伪类和伪元素

一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3C规范中,CSS伪类有如下几个: :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦点的元素增加样式 :hover:当鼠标悬浮在元素上方时,向元素增加样式 :link:向未被访问的链接增加样式 :visited:向已被访问的链接增加样式 :first-child:向元素的第一个子元素增加样式 :lang:向带有指定lang属性的元素增加样式 提示: 1.伪类名称对大小写不敏感.比如:ACTIV

CSS - 伪类和伪元素的区别

伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: CSS伪类 (Pseudo-classes):用于向某些选择器添加特殊的效果,即在元素当前静态样式的基础上添加特殊效果(一般都是动态效果),所以一个元素达到一个特定状态时,它可能得到一个伪类的样式:当状态改变时,它又会失去这个样式. 属性 描述 :active 向被激活的元素添加样式 :focus 向拥有键盘输入焦

HTML转义字符 Unicode和CSS伪类介绍

CSS 伪类用于向某些选择器添加特殊的效果. a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ p:first-child {font-weight: bold;} /* 伪类来选择元素的第一个子元素 */ a:focus {color:

css伪类和伪元素属性

对css中基本选择器和属性选择器以及伪类选择器做了总结,但是提到伪类,与之相对应的必然是伪元素. 那么,,,二者到底有什么不能说的秘密呢?接下来 先归类下两者 伪类的种类: 伪元素的种类: 两者的使用方法: css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示. :Pseudo-classes  伪类 ::Pseudo-elements 伪元素 但因为兼容性问题,现在大部分两者还是统一用单冒号,但抛开兼容性问题,我们书写时应尽量养成良好习惯,区分两者. 二者区别