伪元素选择器

CSS 权威指南笔记 /

就像伪类指定幻想类一样，伪元素能够在文档中插入假想的元素，从而得到某种效果。CSS2.1 中定义了4个伪元素：

设置首字母样式
设置第一行样式
设置之前和之后元素的样式

设置首字母样式

h2:first-letter {font-size:200%;}
<h2>First Letter</h2>

伪元素选择器

实现原理：

<h2>
    <h2:first-letter>F</h2:first-letter>
    irst Letter
</h2>

设置第一行样式

div:first-line {font-size:200%;}
<div style="width: 150px;">
    first line selector
</div>

伪元素选择器

实现原理：

<div style="width: 150px;">
    <div:first-line>first line</div:first-line>
    selector
</div>

设置之前和之后元素的样式
在一个元素前面插入一个内容，并指定样式：

p:before {content:"|";color:silver;font-weight:bold;margin-right:5px;}
<p>this is a comment</p>

伪元素选择器

伪元素选择器

可以看到插入到 p 元素前面的内容有一个单独的实体。
同理，在一个元素后面插入一个内容，并指定样式：

p:after {content:"...";margin-left:5px;}
<p>this is a comment</p>

伪元素选择器

本文章首发在 LearnKu.com 网站上。

1.1k 声望

未知的世界只差向前一步

《L02 从零构建论坛系统》

以构建论坛项目 LaraBBS 为线索，展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。

《G01 Go 实战入门》

从零开始带你一步步开发一个 Go 博客项目，让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。

推荐文章：

更多推荐...

冯老师的困惑 —— 我没有说话 10 / 12 |

记录一下，服务器又又被黑的一次。 34 / 33 |

Redis 实用小技巧—— bitmap 应用之「缓存穿透」问题的处理 19 / 11 |

Redis 实用小技巧—— bitmap 应用之「布隆过滤器」 19 / 10 |

Laravel 角色和权限：拦截器（Gates）和策略（Policies）解释 30 / 1 |

写一个简单的IoC容器案例，理解什么是依赖注入和控制反转 78 / 14 |

讨论数量: 0

发起讨论只看当前版本

暂无话题~