# 合理借助CSS伪元素:before与:after实现页面辅助设计 CSS伪元素实例应用技巧

> CSS伪元素用于向某些选择器设置特殊效果，我们在实例项目中常常会使用它对其页面辅助设计，避免不相干（无用）的标签元素布局，进而使得代码结构清晰明了，同时达到自己想要的视觉效果。

Author: DeathGhost
Published: 2018-08-18 14:28:53
Category: css
Canonical: https://www.deathghost.cn/article/css/33
Keywords: CSS, CSS伪元素, CSS选择器效果, CSS伪元素技巧, CSS应用, CSS实例技巧

关于CSS伪元素中的:before与:after使用，想必大家在实例项目中多多少少都会用到；以前也写过这篇文章，服务器更换了，以前的数据也扔弃了，在这里重新对其作以笔记。

CSS 伪元素我们往往会应用到布局设计结构中，对某标签元素进行特殊效果处理，以满足我们的设计需求；我们在写布局结构过程中往往会简化html的元素布局嵌套，使其更优，以便后续修改、其他人阅读或机器阅读。

![:before与:after实现页面辅助设计 CSS伪元素实例应用技巧](https://www.deathghost.cn/public/upload/article/2021/05/03/1620021440139458.jpg)

:before与:after实现页面辅助设计 CSS伪元素实例应用技巧

我们以"递增"方式对其实例介绍：

## 基础应用，我们对段落首位添加特殊字符、图标或图片

<p class="demo_01">CSS伪元素</p>
.demo_01:before{content:"&middot;";margin:0 5px;}
结果浏览器输出：&middot; CSS伪元素
尾部也是一样，我们对其段落尾部添加"..."省略，整体样式及输出如下：

.demo_01:before{content:"&middot;";margin:0 5px;}
.demo_01:after{content:"...";margin:0 5px;}
结果浏览器输出：&middot; CSS伪元素 ...
图标、图标也是同样道理，我们只需要css对其:before进行修饰（设置宽高比，设置背景图片，设置定位等等），对于现在图标字体，我们可以将其编码输入e.g.：'\e601'一般。

## :before与:after伪元素经常会配合伪类进行设计操作

使用场景：顶部横向导航栏，导航间通过border隔开，最后一个取消border，同时当前页面导航下方border样式显示

最终效果：home | list | about 样式结构。

<nav>
    <ul>
        <li class="active">home</li>
        <li>list</li>
        <li>about</li>
    </ul>
</nav>
nav ul{display:flex;flex-direction:row;}
nav ul li{position:relative;border-right:1px grey solid;flex:auto;text-align:center;}
nav ul li:last-of-type{border:none;}
nav ul li.active:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background-color:grey;}

## CSS伪元素:before与:after对表单元素的设计操作

使用场景：默认页面的表单元素radio（单选）与checkbox（复选）不够美观，我们想通过图标字体（iconfont）对其美化处理，这里用emoji(音标：/ɪˈmoʊdʒi/)代替iconfont

...
<label>
    <input type="radio" name="sex" value=""/>
    <span>Male</span>
</label>
<label>
    <input type="radio" name="sex" value=""/>
    <span>Female</span>
</label>
...
label{display:inline-block;margin-right:5px;}
label:last-of-type{margin-right:0;}
label input[type="radio"]{display:none;}
label span{margin-right:5px;}
label span:before{content:"\26aa";}
label input[type="radio"]:checked   span:before{content:"\26ab";}
操作中，先隐藏原input radio，再给span一个默认的样式图标，最后结合CSS3中的属性选择对设置选中后的图示，最终结果：

<!--初始状态：未选中-->
⚪ Male  ⚪ Female
<!--已选中-->
⚫ Male  ⚪ Female
同样方法，复选框也是一样，这样我们也就不需要通过js进行控制。

## 列表样式排序，数字递增效果，如同ol-li有序排列设计操作

使用场景，取消ol li的默认列表样式，需要对其列表序号进行美化装饰

<ol>
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
    <li>angular</li>
</ol>
ol{margin:0;padding:0;list-style-type: none;counter-reset:sectioncounter;}
ol li:before{content:counter(sectioncounter) "、";counter-increment:sectioncounter;}
显示结果：

1、html
2、css
3、javascript
4、angular
如果我们相对第一个做进一步处理，我们可以借助CSS伪类对其样式设计，这里就不再示例了。

其他的类似通过CSS画几何图形（形状），也可以运用此方法，这个下次另启一片文章对其总结。

这篇文章很简单，相信很多人也都会使用，主要是我们在实例项目中，得灵活借助对其页面布局排版设计，进而优化页面代码减少不必要的元素布局；当然了，还有很多效果可以使用此类方法，大家在使用过程中结合CSS相关对其进一步处理；注意结合实际项目需求，因为中间有些是动态的，因需求而议。

## Related

- Next: [CSS container容器查询](https://www.deathghost.cn/article/css/112)