关于css实现点击波纹效果疑问

Question

.ripple {
  position: relative;
  overflow: hidden;
}

.ripple:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.3s, opacity 0.6s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: 0.2;
  transition: 0s;
}

以上是我在网络上看到的关于按钮点击出现波纹效果的css代码。
添加在button后可以使用，可是其他标签，比如div,li这些常用的添加后都无法出现效果。
想请问下是为什么，以及有什么解决的办法，谢谢大家。

Answer 1

试了下是可以的啊 你div是不是忘了加class或者其他样式覆盖了啊

Answer 2

.ripple你设置暗一点的背景应该可以看到效果的，可能是页面背景色和波纹颜色相近看不到效果吧。
如果你页面是白色背景，自然就看不出效果了，因为波纹也是白色。

Answer 3

给div加个深的背景色，试试