大学解惑10 - CSS中的content怎么换行，以及使用before伪类的优点

大学解惑09 - 单独用HTML javascript CSS 实现三版99乘法表，你就是班里最靓的仔https://blog.csdn.net/xingyu_qie/article/details/127631612

        ☆ 上一篇文章用前端HTML CSS JS基础写了3版99乘法表，有同学说终于把99乘法表写透了，但是紧接着就有同学反馈说，CSS的content老师没有讲到过，我怎么写就换不了行呢。

        ☆ 本文属于答题系列，将会从以下三点说明，CSS中的伪类::before

                △ CSS ::before content的日常使用场景

                △ content的内容怎么换行

                △ 以及需要深入思考的 使用::before的优点，很多人可能都没有想到过这一点

目录

一、CSS中伪类::before的使用场景 

1、使用场景

2、::before的简单使用

二、 ::before内的content文字如何换行

三、采用::before的优点 

1、减少了HTML元素的使用

2、更利于浏览器缓存

3、 有助于代码的可读性与可复用性

---

一、CSS中伪类::before的使用场景 

        1、使用场景

                例如一行文字前有个小icon图标，我们一般的做法是先布局一个小图片，然后再使用行内元素紧接着填充文字

                

                再或者一行文字，前几个字是固定的，而后面的文字又是动态的，这本来也是需要前面布局一个HTML元素，填充“我们可以做到”，后面再紧接着填充动态文字的

                 

                 再比如我们经常可以看见的某电商平台在促销的时候，某个文字左上角顶着一个小图标，这些场景你都应该想到::before的使用

                

        2、::before的简单使用

                例如左上角可以放促销图标，你可以这样写：

        

<style>
  .hot-buy {
     margin: 50px;
     position: relative;
   }
  .hot-buy::before {
      position: absolute;
      left: -15px;
      top: -15px;
      width: 12px;
      height: 12px;
      content: url(aa.png);
  }
</style>

<div class="hot-buy">热门大促销</div>

         

        再例如刚才所说的，某一个元素前面想要填充固定文字，可以这样写：

<style>
  .hot-buy::before {
     content: "我们可以做到 ";
  }
</style>

<div class="hot-buy"> 始终如一的服务</div>

        可想而知，真实的HTML代码中并没有“我们可以做到”这样的字眼，而是在CSS代码中。

二、 ::before内的content文字如何换行

        这属于一个奇葩需求，本来content内的文字或者图标就希望保持简约，更利于实现，但需求总是各种各样，比如我们上一篇文章说到的CSS版99乘法表，就必须做到在content内换行。有同学跟我反馈说不换行，试了半天也不换行。

        由于content内存放的是字符串，采用 \a 或者 \A 做为换行符，注意这里大小写都可以。然后还要添加换行指令 white-space: pre; 代码就像这样：

<style>
    .hot-buy::before {
        content: "我们\A可以\A做到";
        white-space: pre;
    }
</style>

<div class="hot-buy"> 始终如一的服务</div>

三、采用::before的优点 

            如果初学者对于这些优点的解释感觉还有些不明所以，那么就先记下来，并且做为一个继续学习的问题，希望终有一天可以再回过头来看这个问题，可以找到比今天更多的答案。但如果你是即将要准备面试的，一定要记下来！！！

          1、减少了HTML元素的使用

        前端性能优化，非常重要的一个措施就是减少HTML标签的个数。这个很容易理解，比如A页面有100个元素，B页面有1000个元素，正常情况下，一定是A页面加载速度要快的。

        所以在本文中，通过::before伪类的方式，有效的减少了HTML元素的使用，属于一种最佳实践方案了

            2、更利于浏览器缓存

            对于HTML页面，浏览器一般情况下是不做缓存处理的，所以页面内的所有HTML元素每次刷新页面，都是需要重新渲染的，也叫重绘。

            但如果是引入的CSS文件，一旦加载过一次，浏览器就会将CSS文件缓存起来，那么下次用户再次访问页面，或者刷新页面的时候，CSS文件将不会从远程服务器去请求文件，直接从本地浏览器缓存读取了。

             而文本中将节省掉的HTML元素功能，用CSS实现以后，正好符合了这一点优化实践。

             3、 有助于代码的可读性与可复用性

                试想一下，有效的将HTML主要的业务功能保留到页面中，而那些固定的内容被分离出来，那么当别人需要读代码的时候，将更能够分清主次，利于业务代码的交接；

                而且在其他模块需要这段代码的时候，可以拷贝的内容更少，出现错误的概率大大减低。这无疑也是使用::before的一种小优势