CSS 伪元素 (Pseudo-elements)


::after表示法是在CSS 3中引入的,::符号是用来区分伪类和伪元素的。支持CSS3的浏览器同时也都支持CSS2中引入的表示法:after。

注: IE8仅支持:after。

CSS 伪元素用于向某些选择器设置特殊效果


语法

伪元素的语法:

selector:pseudo-element {property:value;}

CSS 类也可以与伪元素配合使用:

selector.class:pseudo-element {property:value;}

p.article:first-letter{} /* 例 : <p class="article"><p> */

可以结合多个伪元素来使用:

p:first-letter{} p:first-line{}

:first-line 伪元素 第一行文本

"first-line" 伪元素用于向文本的首行设置特殊样式

p:first-line{color:#ff0000;} /* 当前页面所有p元素的第一行文字变成红色. */
#divID:first-line  /* #divID 内第一行 */
{
  color:#ff0000;
}
#div p:first-line {} /* 父容器下的所有p元素的第一行 */
					

鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响,蜚声世界文坛,尤其在韩国、日本思想文化领域有极其重要的地位和影响,被誉为“二十世纪东亚文化地图上占最大领土的作家”。

注释:"first-line" 伪元素只能用于块级元素。

注释:下面的属性可应用于 "first-line" 伪元素: font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear;


:first-letter 伪元素 首字母

"first-letter" 伪元素用于向文本的首字母设置特殊样式:

#first-letter:first-letter{
	color: red;
	font-size: xx-large;
}

hi! qpf!


注释:"first-letter" 伪元素只能用于块级元素。

注释:下面的属性可应用于 "first-letter" 伪元素: font, color, background, margin, padding, border, text-decoration, vertical-align (仅当 float 为 none 时), text-transform, line-height, float, clear;


CSS2 - :before 伪元素 内部首部插入内容

h4>CSS2 - :after 伪元素 内部首部插入内容

":before" 伪元素可以在元素的内容前面插入新内容。

/* 在每个 <h1> 元素前面插入一幅图片 */
h1:before
{
  content:url(logo.gif);
}
					
# content: 内容设置:
- content: "→"; //字符串
- content:"(" attr(href) ")"; //调用当前元素的属性
- content: url(logo.png); //用于引用媒体文件
- :before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " } // 调用计数器

# 计数器
counter()结合实现序号问题,而不用使用列表元素。具体还要结合css的 counter-increment 和 counter-reset 属性的用法 。
代码如下:

<h2></h2>
<h2></h2>
<style>
    body {counter-reset:section;}
    h2:before { 
        counter-increment: section; 
        content: "Chapter"  counter(section) ".";
    }
</style>


# css函数
attr() 
使用这一函数需要结合 :before或 :after的伪类样式,
在设置content中使用attr()可以获取该元素的任意属性值,
而自定义的data-*属性就可以很便捷地设置我们想要传递的信息。
例如`content:attr(data-content);`

calc() 
使用calc()做算术。这个函数能让你执行简单的算术计算,
例如计算元素的长宽,免去了你写不易维护的Javascript代码。
这个函数支持所有简单的基本算术运算,包括加减乘除。
注意:calc()能计算的计算表达式里,在加号(“+”)和减号(“-”)两边要留空格,而乘号(“”)和除号(“”)没有这个要求
例如`width: calc(90% - 100px);`