WonderCSS

关于CSS伪元素

CSS伪元素用于向某些选择器设置特殊效果。其中 first-line 和 first-letter 针对文本的首行和首字进行特殊的选择,而 before 和 after 两个伪元素常常用于CSS图形绘制,它们能够实现在不动HTML代码的情况下,在CSS中实现简单的“嵌套”。

:first-line 伪元素

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

对于文章阅读性有要求的人对这个属性一定会很感兴趣,就阅读文章的惯性来说第一段文章几乎是无法跳过的,其重要性对于没有个编辑人员都心知肚明,无论是否处于SEO伪元素:first-line都会给你的文章带来质的改变!

:first-letter 伪元素

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

在很多报刊或其他平面文字排版的样式中经常出现这样的效果,文章的第一个文字特别大并融入整段文章中。那么在HTML页面中我们就能利用伪元素:first-letter定义如下样式即可:


.word:first-letter {
    .font-size:3em;
    float:left;
}

:before 伪元素

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

:after 伪元素

:after 伪元素可以在元素的内容之后插入新内容。

:before和:after两个伪元素在CSS图形绘制上有充分的发挥,可参见 《纯CSS绘制云图标实例》 实例。

By 于湛 发布于 2013.05.14 5,931 次浏览

关于CSS伪元素》上有2条评论

  1. Pingback引用通告: 纯CSS绘制云图标实例 | WonderCSS

  2. Pingback引用通告: 一个简单的CSS样式让你的网站瞬间“高大上” | WonderCSS

发表评论

电子邮件地址不会被公开。 必填项已用*标注