CSS3-解决使用伪元素显示不出背景图片的问题

问题描述

当我想要实现一个功能,更新提示的动画,如下

使用伪元素设置背景图片的方法,但是我添加的背景图片显示不出来.
html代码如下

<ul class='parent'>
<li class='child'>
    <a href="#">一键海涛</a>
</li>
</ul>

解决办法

需要将伪元素设置定位或者设置行内块元素

1.设置行内块元素的方法

伪元素是行内元素,大小根据内容来变的,内容为空,即使有背景图片也是显示不出来的,所以需要转换成行内块元素

.child::after {
        content: "";
        display: inline-block;
        height: 19px;
        width: 33px;
        top: 10px;
        background: url(./new.png) no-repeat;
        animation: updown 0.2s ease-in-out 2.7s infinite alternate;
    }
    /* 上下浮动动画 */
    
    @keyframes updown {
        from {
            transform: translate(0, 0);
        }
        to {
            transform: translate(0, 3px);
        }
    }

需要满足的条件:
1.content属性要有,设置为空内容
2.长宽
3.background背景属性
4.display: inline-block;

demo结果:

2.定位的方式

“子绝父相”(原理不太懂…)

 .parent {
        position: relative;
    }
    
    .child::after {
        content: "";
        position: absolute;
        height: 19px;
        width: 33px;
        background: url(./new.png) no-repeat;
    }

END