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