转载内容
一 基本语法
在了解进阶的应用之前,先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符
时,只需使用伪类使用的单冒号写法,以保证浏览器的兼容性: **p:before { }**
不过,在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号,因此如果使用了 display 或者
width 等属性时使得显示脱离了原本元素后,建议按照标准写双冒号。过于老的浏览器可能会存在支持问题,
不过伪元素大多是配合 CSS3 使用,就无所谓向下兼容了;
这两个伪类下特有的属性 content ,用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意
这些添加不会改变文档内容,不会出现在 DOM 中,不可复制,仅仅是在 CSS 渲染层加入。比较有用的是以
下几个值:
- String – 使用引号包括一段字符串,将会向元素内容中添加字符串。示例:
- a ::after { content: "string"; }
- attr() – 调用当前元素的属性,可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示
出来。示例:
- a ::after { content:" " attr(href) " "; }
- 注意此处有两种写法,其一必须再加多一组双引号,如果没有加多一组双引号,那么它将变
成一个字符串插入。另一种写法a ::after { content: attr(href) ; }
- url() / uri() – 用于引用媒体文件。示例:
- h1 ::before { content: url(logo.png); }
- 注意不能使用引号。如果你将URL用引号括起来,那么它会变成一个字符串和插入文
本“url(image.jpg)”作为其内容,插入的而不是图像本身。
- counter() – 调用计数器,可以不使用列表元素实现序号功能。具体请参见 counter-increment
和 counter-reset 属性的用法。示例:
- h2:before { counter-increment: chapter; content: "Chapter "
counters(chapter) ". " }
- counter-reset : chapter ; 表示初始创建一个chapter的计数器
- counter-increment : chapter; 表示启用chapter计数器
- counters : 在计算多个元素数据时使用 . 分隔
二 进阶技巧
清除浮动是一个时常会遇到的问题,不少人的解决办法是添加一个空的 div 应用 clear:both; 属性。
现在,无需增加没有意义的元素,仅需要以下样式即可在元素尾部自动清除浮动:
.clear-fix { *overflow: hidden; *zoom: 1; }
.clear-fix:after { display: table; content: ""; width: 0; clear: both; }
除了简单的添加字符,配合 CSS 强大的定位和特效特性,完全可以达到给简单的元素另外附加最多两个
容器的效果。有一点需要注意的是,如果不需要内容仅配合样式属性做出效果,内容属性也不能为空,即
content:"" 。否则,其他的样式属性一概不会生效。
三 插入内容的特点
正如前面提及的,插入的内容在页面的源码里是不可见的。只能在css里可见
同时,插入的元素在默认情况下是内联元素(或者,在html5中,在文本语义的类别里)。因此,为了给
插入的元素赋予高度,填充,边距等等,你通常必须显式地定义它是一个块级元素。
这会是对如何设计伪元素的一个简要的说明,看我下面文本编辑器的这幅图
还要注意的是典型的CSS继承规则适用于插入的元素。例如,你有字体系列黑体,宋体,无衬线字体应用
到body元素里,然后伪元素会像其他元素一样继承这些字体系列。
同样的,伪元素不会继承没有自然继承自父元素(如 padding and margins)的样式。
伪元素不是决定性的
幸运的是,缺少伪元素不会造成大问题。大多数情况下,伪元素一般修饰(或者帮助)内容,不会给不支
持的浏览器造成问题。所以,如果你的支持者具有较高的IE版本,你仍然可以在某种程度上使用它们。
一些提醒
正如前面提到的,伪元素不会出现在DOM中。这些元素不是真正的元素。因此,它们不是可用的。所以,
不要使用伪元素生成内容,是您的网页的可用性和可访问性的关键。
另外一件需要记住的是,开发工具,例如火狐,不要用伪元素显示内容。所以,如果使用了,伪元素会造
成难以维护和调试缓慢。
实例测试
<a type="button" title="Play">Play</a> 用a标签做个按钮
这是一些CSS代码,PS:(有些可能多余,兼容性也没写。)
a{
display: inline-block;
text-align:center;
line-height:25px;
position:relative; /*设置相对定位,伪元素生成内容时要用到*/
width:55px;
height:25px;
-webkit-border-radius:5px;
border:1px solid #e4393c;
background:#fff;
text-decoration:none;
color:#333;
cursor:pointer;
font-weight:bold;
font-family:"SimHei";
transform: translateZ(800px); /*定义元素过度的方向,此处为定义元素的视距*/
transition: color 350ms;
}
a::before{
content:attr(title); /*生成该元素的title属性*/
position:absolute; /*绝对定位到元素上*/
top:-1px; /*因为元素有使用边框,所以调整的偏差*/
left:-1px;
bottom:-1px;
right:-1px;
/*width:100%;*/
/*height:100%;*/
z-index: -1; /*层级关系,使元素暂时不可见*/
-webkit-border-radius:5px;
/*transform-origin: 50%;*/
transform: scaleY(0); /*定义元素缩放的方向和比例*/
background:#000; /*定义元素缩放的背景色*/
transition: transform 350ms;
}
a:hover::before{
transform: scaleY(1); /*当元素被hover时触发伪元素的变形方向和比例*/
}
a:hover{
color:#fff;
}
以上代码就可以生成一个具有动画效果的小按钮。