伪元素选择器

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 网站上。

Markdown 文本

1.1k 声望

未知的世界只差向前一步

从零开发一个电商项目，功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等

我们将带你从零开发一个项目并部署到线上，本课程教授 Web 开发中专业、实用的技能，如 Git 工作流、Laravel Mix 前端工作流等。

讨论数量: 0

暂无话题~