8 个硬核技巧带你迅速提升 CSS 技术

5、添油加醋的伪元素

有时为了实现某个效果而往页面里反复添加标签变得很繁琐，添加太多标签反而不好处理而变得难以维护。此时会引入伪元素这个概念解决上述问题。正是伪元素能解决一些可不添加其他标签而起到占位作用，笔者才称伪元素为“添油加醋”。

上述选择器分类有提及伪元素，狭义上来说选择器除了伪元素，其他都是伪类。伪元素和伪类虽然都是选择器，但它们还是存在一丝丝的差别。

• 伪元素通常是一些实体选择器，选择满足指定条件的DOM，例如::selection、::first-letter和::first-line
• 伪类通常是一些状态选择器，选择处于特定状态的DOM，例如:hover、:focus和:checked

「伪元素」指页面里不存在的元素。伪元素在HTML代码里未声明却能正常显示，在页面渲染时看到这些本来不存在的元素发挥着重要作用。:before和:after是两个很重要的伪元素，早在CSS2就出现了。

起初伪元素的前缀使用「单冒号语法」。随着CSS改革，伪元素的前缀被修改成「双冒号语法」，:before/:after从此变成::before/::after，用来区分伪类，未提及的伪元素同理。若兼容低版本浏览器，还需使用:before和:after。

两者最主要的区别就是伪类使用「单冒号语法」，伪元素使用「双冒号语法」。当然笔者还是提倡同学们使用「单冒号语法」标记伪类，使用「双冒号语法」标记伪元素，这样在代码形式上就能一眼区分出来。

::before和::after的使用场景很多，也是笔者着重研究的技巧之一。::before/::after必须结合content使用，通常用作修饰节点，为节点插入一些多余的东西，但又不想内嵌一些其他标签。若插入2个以下(包含2个)的修饰，建议使用::before/::after。

说时迟那时快，立马结合上述绘制三角形的原理绘制一个常用的气泡对话框，圆滚滚的身子带上一个三角形的尾巴。气泡对话框的身板就是一个圆角矩形，可用<div>直接绘制，小尾巴是一个三角形，可用::after占位并绘制。这样就无需在<div>里添加一个<i>绘制小尾巴了。

<div class="bubble-box">iCSS</div>

.bubble-box {
    position: relative;
    border-radius: 5px;
    width: 200px;
    height: 50px;
    background-color: #f90;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    &::after {
        position: absolute;
        left: 100%;
        top: 50%;
        margin-top: -5px;
        border: 5px solid transparent;
        border-left-color: #f90;
        content: "";
    }
}

从中可得出一个技巧：「若为节点做一些修饰却不想插入其他标签，可用::before和::after代替，但适用于2个占位以下」。其实这个也不算什么特别技巧，只是很多同学都不会去注意这种用法，有需求都是直接添加标签。也许以下提及的障眼法和内容插入会让同学们对伪元素另眼相看。