网站开发进阶(七十一）：css伪元素 before和 after用法详解_css before after

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

css有一系列的伪元素，本文主要详述::before和::after元素的使用。

二、伪元素::before和::after用法

这个两个伪元素在真正页面元素内部之前和之后添加新内容（当然了，可以对伪元素应用定位可以置于任何位置）。可以用以下例子来说明：

<p>wonyun!</p>
<style>
 p:before{content: "hello "}
 p:after{content: "you are handsome!"}
</style>

上面例子从技术角度看，等价于下面的html结构：

<p>
    <span>hello </span>
    wonyun!
    <span> you are handsome!</span>
</p>

由此可知：伪元素::before和::after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容,设置::before和::after时必须设置其content属性，否则伪元素就不起作用。那么问题来了，content属性的值可以有哪些内容呢，具体有以下几种情况：

• 字符串，字符串作为伪元素的内容添加到主元素中.

注意⚠️：字符串中若有html字符串，添加到主元素后不会进行html转义，也不会转化为真正的html内容显示，而是会原样输出。

• attr(attr_name), 伪元素的内容跟主元素的某个属性值进行关联，及其内容为主元素的某指定属性的值。

注意⚠️：content必须有值，至少是空。

好处：可以通过js动态改变主元素的指定属性值，这时伪元素的内容也会跟着改变，可以实现某些特殊效果，如图片加载失败用一段文字替换。

• url()/uri(), 引用外部资源，例如图片；
• counter(), 调用计数器，可以不使用列表元素实现序号问题。

三、::before 和 ::after 特点

上面说了，伪元素是通过样式来达到元素效果的，也就是说伪元素不占用dom元素节点，引用::before和::after伪元素的主要特点如下：

• 伪元素不属于文档，所以js无法操作它；
• 伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件；

前面说块级元素才能有::before和::after，其实是不妥的，大部分行级元素也可以设置伪元素，但是像img可替换元素，因为其外观和尺寸有外部资源决定，那么如果外部资源正确加载，就会替换掉其内部内容，这时伪元素也会被替换掉，但是当外部资源加载失败时，设置的伪元素是可以起作用的。

基于伪元素的特点可以知道其优缺点：

优点

• 减少dom节点数；
• 让css帮助解决部分js问题，让问题变得简单；

缺点

• 不利于SEO；
• 无法审查元素，不利于调试；

四、::before 和 ::after 常见使用场景

4.1 清除浮动

清除浮动是前端最常见的问题，有一种做法是使用一个空的页面元素如div来清除浮动，但是这种做法增加毫无语义的页面元素，而且占用dom节点。更可取的做法是利用伪元素来清除浮动：

<div class="l-form-row">
    <div class="l-form-label"></div>
    ....
</div>
<style>
 .l-form-row:after {
 clear: both;
 content: "\0020";
 display: block;
 height: 0;
 overflow: hidden
 }
</style>

这样，class=l-form-row的元素内部任何浮动都能清除掉，不用额外添加无意义的元素。

4.2 利用attr()来实现某些动态功能

在页面中常见这种问题，页面上加载的图片在无法加载时会显示一个破损图片，直接影响页面的美观；

那么可以通过伪元素配合样式能够让未加载的图片看起来真的像破裂的效果，如下图所示：

<img>是一个替换元素，其外观和尺寸是由外部资源来决定的，当外部图片资源加载失败时其会显示破裂图片和alt文字，尺寸仅由其自身内容决定。

这时<img>元素可以使用伪元素::before和::after，因为其元素内容没有被替换；利用attr()来获取图片alt属性值作为伪元素::after的content内容来替换img的内容，并运用适当的样式从而完成：图片加载成功时显示正常的图片，加载失败时显示图片破裂效果的样式，具体代码参考：

img{
    min-height: 50px;
    position: relative;
 }
 img:before: {
     content: " ";
     display: block;
     position: absolute;
     top: -10px;
     left: 0;
     height: calc(100% + 10px);
     width: 100%;
     backgound-color: rgb(230, 230,230);
     border: 2px dotted rgb(200,200,200);
     border-radius: 5px;
 }
 img: {
     content: '\f127" " Broken Image of " attr(alt);
     display: block;
     font-size: 16px;
     font-style: normal;
     font-family: FontAwesome;
     color: rgb(100,100,100)
     position: absolute;
     top: 5px;
     left: 0;
     width: 100%;
     text-align: center;
 }

4.3 与counter()结合实现序号问题，而不用使用列表元素

具体还要结合css的 counter-increment 和 counter-reset 属性的用法 。
代码如下：

<h2></h2>
<h2></h2>
<style>
 body {counter-reset:section;}
 h2:before { 
 counter-increment: section; 
 content: "Chapter" counter(section) ".";
 }
</style>

结果如下：

4.4 超链接特效

举例：配合 CSS定位实现一个鼠标移上去，超链接出现方括号的效果。

<meta charset="utf-8" />
<style type="text/css">
 body{
 background-color: #425a6c;
 }
 a {
 position: relative;
 display: inline-block;
 outline: none;
 color: #fff;
 text-decoration: none;
 font-size: 32px;
 padding: 5px 20px;
}
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -10px; }
a:hover::after { content: "\5D"; right: -10px; }
</style>
<a>鼠标移上去出现方括号</a>

4.5 特效使用

利用这两个伪元素，可以实现各种效果，如放大镜、叉叉、箭头、三角符等，也可轻易实现如下效果

代码实现如下：

a {
	position: relative;
	display: inline-block;
	outline: none;
	text-decoration: none;
	color: #000;
	font-size: 32px;
	padding: 5px 10px;
}

a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -20px; }
a:hover::after { content: "\5D"; right:  -20px; }

代码实现如下：

table{overflow: hidden;}
td, th{
    padding: 10px;
    position: relative;
    outline: 0;
}
td:hover::after,
th:hover::after { 
      content: '';  
      background-color: lightblue;
      position: absolute;  
      left: 0;
      height: 10000px;
      top: -5000px;
      width: 100%;
      z-index: -1;
}

td:hover::before {
      background-color: lightblue;
      content: '';  
      height: 100%;
      top: 0;
      left: -5000px;
      position: absolute;  
      width: 10000px;
      z-index: -1;
}

具体代码：

### 文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**