伪元素:before和:after用法

向右看齐 2022-12-25 14:55 173阅读 0赞

css的伪元素之所以称之为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。

看例子：

<div class="box">xiaobai</div>
     
    样式：
    .box:before{content:"hello"}
    .box:after{content:"how are you?"}

运行结果就会变成：**hello xiaobai  how are you?**

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

具体有以下几种情况：

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

a:after{content:"→"}

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

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

a:after { content:"(" attr(href) ")"; }

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

*  url()/uri(),引用外部资源，例如图片；

h1::before { content: url(logo.png); }

*  counter(), 调用计数器，可以不使用列表元素实现序号问题。

h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

### 对伪元素的描述 ###

伪元素不属于文档，所以js无法操作它

伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件

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

基于伪元素的特点可以知道其优缺点，也引用别人文章的话：

**优点**

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

**缺点**

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

### :before和:after常见使用场景 ###

1.清除浮动

.box:after{
        content:"";
        display:block;
        clear：both;
        height:0;
        overflow:hidden;
        visibility:hidden;
    }
    .box{
       zoom:1;
    }

2.在页面中常见这种问题，页面上加载的图片在无法加载时会显示一个破损图片，直接影响页面的美观，可以通过伪元素配合样式能够让未加载的图片看起来真的像破裂的效果

<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;
            }

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.上述可以实现扩大可点击区域，这对应手机用户来说更加友好一些，否则用户点击不会触发相应的事件；具体代码实现如下：

.play-cover {position: relative}
            .play-cover:before{
                content: "";
                display: block;
                position: absolute;
                width: 0;
                height: 0;
                border-left: 8px solid white;
                border-top: 5px solid transparent;
                border-bottom: 5px solid transparent;
                margin-left: 9px;
                margin-bottom: 7px;
                z-index: 5;
            }
            .play-cover:after{
                content: '';
                display: block;
                position: absolute;
                width: 20px;
                height: 20px;
                border: 2px solid white;
                background: rgba(0, 0, 0, .6);
                border-radius: 12px;
                background-clip: padding-box;
            }

5.方框内容追加三角形

p::before{
         display:inline-block;
         border:5px solid transparent;
         border-right-color:green;
         content:"";
         porsition:relative;
         left:-10px;

6.做单位、标签、表单必填标准

表单输入框的必填标记（往往是红色的“\*”字符），不应该放到文档当中，使用::before可以很优雅地解决这个问题（其实就是字符图标的进一步应用)

<label calss="name">
        "姓名"
        <input />
    </label>
    
    
    样式：
    .name::before{
        content:“*”;
        color:red;
        diplay:inline-block;
        width:0;
        position:relative;
        left:-5px;
    }