28.尚硅谷_HTML&CSS基础_伪元素.avi原创

这层器说完了，然后我们再说一个和伪类其实特别像，其实一般我们不用分的那么细，叫个叫一个什么呢？叫做一个伪，伪元素啊，选择器啊，伪元素或者直接写伪元素吧，那什么又叫伪元素呢？伪元素元素知道是什么呀，我这说标签就是元素，元素就是标签啊，来我写一个P标签，来我是一个这个段落我一保存，这是不是就是一个元素啊，哎，这就一个元素来运行出来了，是不是在这儿呢？这个P标签，那我们说了，那什么叫伪元素啊。什么叫伪元素啊，来style个事，那既然叫伪元素，是不是就是一些什么呀，我们使用我们这个伪元素来表示我们这个元素中的一些什么呢？特殊的位置啊，来表示我们这个元素中的一些特殊的什么呀，位置，那咱们比个比如举个例子，这来看这是不是叫做我是一个段落呀，这个段落里边是不是有这么246个字啊，但是这六个字里边我们发现有一个特殊位置谁啊，比如说第一个位，第一个位置是不是第一个我字啊，那这个就是一个什么呀，就是一个特殊位置啊，特殊位置，那有的时候我需要干嘛呀，一个段落里边的第一个字，我需要让它干嘛呢？突出显示对吧？诶，那我怎么去选这个字啊，常规手段我怎么办？是不是加个SPA呀，诶加个SPA加个SPA，然后给他SPA来个。

什么乱，乱七八糟的对吧，但是这么写它干嘛呀，是不是麻烦呀，而且你这个第一个段落有可能干嘛了，有可能有可能会变，也就是说我希望什么呢？不管第一个字是我是事还是一还是个还是段落，我希望什么呀，你是不是都会变呀，而我用死办完了以后，我改起来就比较麻烦了，那所以这一块呢，我们就可以干嘛呀，用伪元素来实现这个这个东西，那怎么有没有这样的元素呢？我们直接来看这啊，这里边有一个叫什么呀，叫做一个first letter for letter叫什么呀，首字母是不是第一个字母啊，哎，所以呢，这就是表示的是一个尾元素啊尾元素那这个标怎么写来写一个为什么呢？为我们这个P中的什么呢？哎，第一个第一个字符来干嘛呢？来设置一个这个特殊的什么呀样式，我这来一个来一个这个P，然后我这直接写，我这么写什么效果呀，是不是元素里边所有字都变了呀，哎，我这一刷新走你，而我只想改。

哎呀，只想改第一个，那怎么写呢？直接来一个叫做一个冒号first letter啊foot letter保存最后一刷新走你什么效果了，是不是只有第一个变了，哎，只有第一个变化来，我们再改一个，改一个什么呢？改一个这个fo size size来什么呢？来一个20个像素保存，现在一刷新走，你是不是只有它变大了呀，而且他第一个字是不是，他管不管第一个字是谁呀，把我删了，第一个字变成谁了，是变成是啊就是变它只是什么呀，第一个字这叫什么呀？伪元素啊，选择我们页面，选择我们这个元素中的一些什么呀，特殊的位置啊特殊的位置，那除了这个first letter还有一个叫什么呢？P冒号有个叫什么呀？First line first line叫什么呀？哎，是不是首行第一行啊，哎，第一行，所以这里边我们来说叫什么呢？哎，叫做为我们这个P中的这个第一行来设置一个这个背景颜色为什么呢？为黄色。

那我这叫什么呀？P冒号一个first来来什么呢？Background color配还有一个什么呀，Yellow，我一保存一刷新走，你是不是第一行就变黄了呀？他说这玩意儿没啥意思，为啥呀？总共就一行是吧？哎，总共就一行，所以这里边咱们得多写几个字，我把我这个鲁迅请出来，Ctrl a ctrl c全都复制过来，然后呢，这P里边我就不写它了，来一粘保存，现在一刷新走，你发现什么了？诶是不是只有第一行变了呀？哎，只有第一行变了，那现在干嘛呢？我调整一下浏览器大小，我这窄了第一行东西是不是少了呀，你看少了以后是不是干嘛呀，是不是也是第一行啊，哎，也是第一行，那你宽了以后干嘛呀，是不是也是第一行啊？所以first line表示什么呀？表示的是我们这个第一行啊，这些都是什么呀？一些特殊的位置叫做一个什么呀，伪元素啊，伪元素first line，还有一个叫做一个first的letter，第一个词，第一个字符first line是我们这个第一行啊伪元素，那除了这个伪元素呢，还有什么呢？还有一个还有一个特殊位置，什么叫特什么特殊位置呢？那我们来看啊，这块crl shift的F快捷键。

这是格式化的快键啊，Ctrl shift的F整完了以后，你发现什么呢？你发现我把我这个整个这文本是不是整成整成一行了呀，还是整成一行了，那我们这里边还有一个特殊位置，还有一个特位置在哪啊，在这块这叫什么呀？这是不是在我们这个P标签的最前边这部分呀？诶最前边这部分，这部分也是一个什么呀，特殊位置还有哪呢？在我们P标签是什么呀？最后这个位置，这位置叫哪呀？叫什么呀？在我第一个字和我P标签之间这个位置能理解吧，最前边这个位置，那这叫什么呢？叫做一个before，直接写叫一什么呢？P冒号be forp冒号before，我先把前面住了啊，不让前面干扰咱们P冒号before before表示什么呀？前边啊，前边before这个伪元素表示什么呢？表示我们这个元素最前边的什么呀部分，什么叫最前边啊。

就这个什么呀，尖号的什么呀，就这块儿就这个位置啊，就这个位置叫什么呀？B before啊那现在我来什么呢？我使用P冒号比份，这就表示什么呢？表示选中我们这个P的什么呀，最前面这部分，最前面这部分，那我们就来写一个吧，来一个color来一什么呢？来一个red，是不是设置一红色呀，一保存我一刷新走你诶有变化吗？没有变化为啥呀。

我们来看看吧，啊，来看看body，我们这个P标签最前边这部分是不是就这儿啊，那问题来了，我这最前面这部分有东西吗？是不是什么也没有啊，所以注意默认before这个位置什么呀，什么都没有啊，默认before这个位置什么都没有，所以你这设置干嘛呀，没用啊，没用，所以这边来说一般什么呢？一般我们这个笔。哎，都需要结合我们的一个属性什么呢？哎，Content，哎这个什么呀，这个样式，哎一起使用啊，一起使用干嘛呢？诶通过我们这个content可以什么呢？可以像我们这个before，待会我们还会说还有一个什么呢或什么呀，After的这个位置干嘛呢？哎，添加一些内容啊，添加一些内容，那什么意思？来直接写了，我直接来一个content啊content来我写一个，我会出现在整个这个段落的什么呀，最前边，最前边就是谁呀，是不是就是笔before那块啊，诶来我们看看啊，这一刷新来走，你发现什么了，你看在我的后缘，这是我们原来那个内容吧，你发现什么在它前边是不是。

出来这么一句话呀，这句话是哪来的，就是通过我们那个什么呀，Before，然后那个content干嘛呢？添加过来的内容能看见吧，诶我们来看这段内容就添加到哪了，添加到我们这个标签的什么呀，最前面啊，添加这部分了啊，添加这部分了，诶所以你会发现它这个这个东西我是怎么添加过来的，我是通过A写的，还是通过CSS添加的，哎，通过CSS添加的，所以你会发现什么呢？你看我选这些字，我是不是都能选呀，但是你看前面那些字。

干嘛呀，我是不是选不中啊，哎，我选不中那代表什么呀，这是通过我们这个CSS选添加的，那我们来看看能不能给他设置颜色啊，来一个color来一个什么呢？Right保存一刷新，诶来看是不是这就变成一个红色呀，诶before表示我们这个元素的什么呀？最前边啊，最前边和before类似的有一个叫什么呢？哎，Up after表示我们这个元素的什么呀？哎，最后边的部分，最后边的部分是哪啊就是什么呀，结束标签，前面那东西啊，前面这块位置啊，都是注意伪元素都是指的一些特殊的什么呀，位置啊，特殊的位置来我直接写一个复制了，我直接把笔缝换成什么呢？换成after after这里边来什么呢？我会出现在整个段落的这个最后边，颜色换一个换一个这个orange来，我这一保存，咱们来看before是最前面，而AFTER1保存在哪呢？最后边啊，After在这个最后边，同样这东西也干嘛呀。

也不能选中看见吧，诶也是不能选中的，一个是比before，一个是after，比before最前面，After是最后边，可能有同学看到这这玩意儿，它这有啥用是吧？我想选中最前边，我前面加个SPA是不是就行了呀？我选中右边，我后边加个SPA是不是行了，我干嘛要这么写，有什么用？那这个呢，其实用的呢不是特别的多，但是有一些特殊情况，有一些特殊的技巧，我们需要用到这个before，这个after，还有这个content，所以现在呢，你先有一个印象，你要知道比before是哪，它都是表示什么呀？特殊位置标签叫什么呀？紧随着开始标签后边那部分，而after呢是什么呀？紧随着结束标签前边那部分，一个是选择的前边，一个是选择到后边，现在先有一个印象，以后我们会说它会有什么用啊，有什么用，好这也是我们说这么几个伪元素first了，四个first letter，第一个，诶字符first line第一行，还有一个for元素的这个，最前面after是我们元素的这个。

最后边啊，最后边好，这里边儿我们来听一下委员。