CSS :before and :after 伪元素的最佳实践

在这里给大家总结一下，伪元素的八大最佳实践场景。希望对各位的日常开发有所启发。

假设我们有如下的HTML代码

<p>paragraph text</p>

我们可以用伪元素添加内容比如：

p:before {
    content: "this is ";
    font-weight: bold;
    font-style: italic;
}

将会出现如下效果：

请记住，实际上这种做法是在内容之前或之后添加元素。它不是出现在所选元素旁边的东西，而是与其内容有关。

通过伪元素:before and :after 插入图标是非常流行的做法。因为我们可以给伪元素添加几乎任何CSS样式属性（常见的情况是：创建的伪元素是一个块并附加背景图像）

比如我们给出一段HTML代码

<p>paragraph text</p>

通过伪元素方式添加icon图标

p:before {
    content: "";
    display: block;
    background: url("icon.jpg") no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 6px 0 0;
}

在浏览器中呈现出如下效果

有时候，将不同风格的链接指向外部资源是一种很好的做法。通过伪元素的方式，可以很容易地实现它。假设我们有以下几段文字：

<p>Krasimir Tsonev is <a href="http://krasimirtsonev.com">developer</a>
who likes to write and <a href="https://twitter.com/KrasimirTsonev">tweet</a>.</p>

我们可以在该链接之后添加一个小图标，指示它指向当前域外部的页面。

a {
    text-decoration: none;
    font-weight: bold;
    color: #000;
}
a:after {
    content: "";
    display: inline-block;
    background: url("icon-external.jpg") no-repeat top right;
    width: 14px;
    height: 12px;
}

呈现如下效果：

通常当我们做面包屑导航的时候，面包屑之间有链接和分隔符。可以通过伪元素的方式实现，而不是添加而外元素到DOM中。

<p>
    <a href="#">Home</a>
    <a href="#">Team</a>
    <a href="#">Developers</a>
</p>

CSS代码如下：

a {
    text-decoration: none;
    font-weight: bold;
    color: #000;
}
a:after {
    content: " /";
}
a:first-child:before {
    content: " » ";
}
a:last-child:after {
    content: "";
}

可以得到如下效果

在一些不做responsible的PCweb页面，使用浮动属性进行布局仍然很受欢迎。但是，一旦一个元素浮动，你需要另一个元素来清除浮动。
例如下面的代码：

* html
<a href="#">Home</a>
<a href="#">Products</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at purus ac lacus ultrices vehicula.</p>

* css
a {
    float: left;
    display: block;
    width: 100px;
    ... other styling
}

文本应该在链接下面，而不是添加新的DOM节点。我们可以使用：在伪元素之前清除浮动：

p:before {
    content: "";
    display: block;
    clear: both;
}

:before and :after 伪元素非常适合作为引用标记。

<p> 
    Martin Fowler said
    <span class="quoted">Any fool can write code that a computer can understand. 
    Good programmers write code that humans can understand.</span>
</p>

只有使用CSS才能达到以下效果：

span.quoted {
    font-family: Georgia;
    font-size: 16px;
    display: block;
    margin: 14px 0 0 0;
    font-style: italic;
}
span.quoted:before {
    content: "“";
    font-size: 40px;
    color: #999;
    line-height: 0;
    display: inline-block;
    margin: 0 6px 0 0;
}
span.quoted:after {
    content: " ”";
    font-size: 40px;
    color: #999;
    line-height: 0;
    display: inline-block;
    margin: 0 0 0 4px;
}

设计师给弹出窗口或者很好看的工具提示经常会添加这种箭头形状的设计。它们的实现有点麻烦。幸运的是，我们可以利用伪元素的方式解决这个问题，而不需要额外的图像或者JavaScript代码。

HTML代码如下：

<h2>What is CSS?</h2>
<div class="popup">
    Cascading Style Sheets is a style sheet language used for describing
    the presentation semantics of a document written in a markup language.
</div>

这个页面的样式是，在左边有一个标题，并在右边弹出。我们需要在描述文本的左边添加这个小箭头，指向标题。可以用伪元素这样实现：

h2 {
    float: left;
    width: 170px;
}
.popup {
    float: left;
    width: 340px;
    background: #727272;
    padding: 10px;
    border-radius: 6px;
    color: #FFF;
    position: relative;
    font-size: 12px;
    line-height: 20px;
}
.popup:before {
    content: "";
    display: block;
    width: 0; 
    height: 0; 
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid #727272; 
    position: absolute;
    top: 16px;
    left: -12px;
}

在有一些单页网站，我们会通过标题来分割页面的组织部分。每个标题由两条线包围。就像这样：

再一次，我们利用伪元素方式轻松实现：

h2 {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}
h2:after {
    display: inline-block;
    margin: 0 0 8px 20px;
    height: 3px;
    content: " ";
    text-shadow: none;
    background-color: #999;
    width: 140px;
}
h2:before {
    display: inline-block;
    margin: 0 20px 8px 0;
    height: 3px;
    content: " ";
    text-shadow: none;
    background-color: #999;
    width: 140px;
}

使用伪元素:before and :after 最大的好处是可以在不添加新的DOM节点的情况下对HTML进行样式设置。 CSS是前端控制视觉的工具，结合伪元素，可以轻松完成很多精巧的设计，好看的样式。

延伸阅读：

• Meet the Pseudo Class Selectors
• CSS Tooltips
• CSS Triangle
• Learning To Use The :before And :after Pseudo-Elements In CSS
• CSS: :before and :after pseudo elements in practice