Css 代码笔动画在Chrome中工作，但在Mozilla中不工作，有什么问题吗？

codepen代码（）在Chrome中运行时显示正确的动画，但在Mozilla Firefox中打开时显示不正确。代码块中是否缺少任何内容，或者我是否需要包含任何字符串才能在Mozilla中运行代码

CSS代码如下所示：-

// Customize
$option-color: #cbd1d8;
$checked-option-color: #40e0d0;
$option-size: 40px;
$explosion-distance: 5; // Multiplied by $option-size
$explosion-duration: 0.65s;

// On-click animation
@include keyframes(click-wave) {
$offset: ((($option-size*$explosion-distance)-$option-size)/2);

0% {
@include size($option-size);
opacity: 0.35;
position: relative;
}

100% {
@include size($option-size*$explosion-distance);
margin-left: -$offset;
margin-top: -$offset;
opacity: 0.0;
}
}

// Checkbox/Radio replacement
.option-input {
@include appearance(none);
@include position($option-size/3 0 0 0);
@include size($option-size);
@include transition;
background: $option-color;
border: none;
color: #fff;
cursor: pointer;
display: inline-block;
outline: none;
position: relative;
margin-right: 0.5rem;
z-index: 1000;

&:hover {
background: darken($option-color, 15%);
}

&:checked {
background: $checked-option-color;

// The checkmark
&::before {
  @include size($option-size);
  @include position(absolute);
  content: '\2716';
  display: inline-block;
  font-size: $option-size/1.5;
  text-align: center;
  line-height: $option-size;
 }

 // The "wave"
 &::after {
  @include animation(click-wave $explosion-duration);
  background: $checked-option-color;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
  }
  }

  &.radio {
  border-radius: 50%;    

  &::after {
  border-radius: 50%;
  }
  }
  }

  // Demo styles
  body {
  @include box(horizontal, start, stretch);
  background: #e8ebee;
  color: darken($option-color, 15%);
  font-family: $helvetica;
  text-align: center;

  div {
  padding: 5rem;
  }

  label {
  display: block;
  line-height: $option-size;
  }
  }

为什么？ 问题源于输入标记上的伪元素；因为它们是空元素，所以技术上不允许使用伪元素（技术上是子元素）。Chrome之所以能够工作，是因为它没有严格遵守规则，Firefox显示了正确的行为

为了说明这一点，以下是div上的

：：before

和

：：after

的外观：

<div>
  <span>I am :before</span>
  I am content of div
  <span>I am :after</span>
</div>

工作示例 这并不完美，需要调整；这只是给你一个大概的想法

下面是香草CSS的演示：

input[type=checkbox]，
输入[类型=收音机]{
显示：无；
}
@-webkit关键帧单击波浪{
0% {
高度：40px；
宽度：40px；
不透明度：0.35；
位置：相对位置；
}
100% {
高度：200px；
宽度：200px；
左边距：-80px；
利润上限：-80px；
不透明度：0.0；
}
}
@-moz关键帧单击波浪{
0% {
高度：40px；
宽度：40px；
不透明度：0.35；
位置：相对位置；
}
100% {
高度：200px；
宽度：200px；
左边距：-80px；
利润上限：-80px；
不透明度：0.0；
}
}
@关键帧单击波浪{
0% {
高度：40px；
宽度：40px；
不透明度：0.35；
位置：相对位置；
}
100% {
高度：200px；
宽度：200px；
左边距：-80px；
利润上限：-80px；
不透明度：0.0；
}
}
.选项输入+标签{
-webkit外观：无；
-moz外观：无；
-ms外观：无；
-o-外观：无；
外观：无；
位置：相对位置；
顶部：13.33333px；
右：0；
底部：0；
左：0；
高度：40px；
宽度：40px；
-webkit过渡：所有0.15秒都减少0秒；
-moz转换：所有0.15秒都会减少0秒；
过渡：所有0.15秒都减少0秒；
背景：#cbd1d8；
边界：无；
颜色：#fff；
光标：指针；
显示：内联块；
大纲：无；
位置：相对位置；
保证金权利：0.5雷姆；
z指数：1000；
}
.选项输入+标签范围{
位置：绝对位置；
左：100%；
颜色：#000；
左边距：10px；
}
.选项输入+标签：悬停{
背景#9faab7；
}
.选项输入+标签.收音机{
边界半径：50%；
}
.option输入+标签.radio:：after{
边界半径：50%；
}
.选项输入：选中+标签{
背景#40e0d0；
}
.选项输入：选中+标签：：之前{
高度：40px；
宽度：40px；
位置：绝对位置；
内容：'\2716'；
显示：内联块；
字体大小：26.66667px；
文本对齐：居中；
线高：40px；
左：0；
}
.选项输入：选中+标签：：后{
-webkit动画：单击wave 0.65s；
-moz动画：点击wave 0.65s；
动画：单击波浪0.65秒；
背景#40e0d0；
内容：''；
显示：块；
位置：相对位置；
z指数：100；
指针事件：无；
}
身体{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：框；
-webkit盒方向：水平；
-moz盒方向：水平；
盒子方向：水平；
-webkit盒包：开始；
-moz-box-pack：启动；
盒式包装：启动；
-ms-flex-pack：启动；
-webkit框对齐：拉伸；
-moz框对齐：拉伸；
框对齐：拉伸；
-ms-flex-align：拉伸；
背景：#e8ebee；
颜色：#9faab7；
字体系列：“Helvetica Neue”，Helvetica，Roboto，Arial，无衬线；
文本对齐：居中；
}
身体科{
填充：5rem；
}
车身标签{
显示：块；
线高：40px；
}

你好
你好

只是为了确保我明白：你是说问题出在

：before

和

：after

规则没有

内容

属性？@Pointy-不，问题是因为

：：before

和

：：after

不能放在无效元素上，例如

。Chrome在呈现问题中的CSS时在技术上是不正确的；这是有道理的。注意输入元素没有结束斜杠。@Rob-你是什么意思？在HTML5中，void元素可以自动关闭，尽管它不是强制性的。

<input id="check-one" type="checkbox" class="option-input checkbox" CHECKED />
<label for="check-one"><span>Hello</span></label>