如何添加:之后:在提交按钮之前

Question

我正在尝试添加：after/：在提交按钮上的元素之前，但对我不起作用。

实际上，我需要在从左到右的按钮上添加滑动(向右滑动(过渡效果。喜欢-https：//ianlunn.github.io/hover/

<input class="submitBtn" type="submit" name="" value="Submit">

.submitBtn{ position: relative; width: 100%; height: 50px; background: #000; text-align: center; color: #FFF; border: none;}
.submitBtn:after{ content: ''; position: absolute; width: 100%; height: 100%; background: yellow; left: 0; top: 0;}

Answer 1

输入元素不支持伪元素。

根据规范：

：pseudo-elements在它们是仅在关联元素中插入的真实元素。

这意味着伪元素只能在容器元素上使用和输入元素不能包含其他元素，因此不能支持它们。

---

workaround

要实现自己的目标，您可以简单地将输入包裹在容器中：

.submitWrap::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: yellow;
  left: 0;
  top: 0;
  z-index: 1;
}
.submitBtn {
  position: relative;
  z-index: 2;
}

<div class="submitWrap">
  <input class="submitBtn" type="submit" name="" value="Submit">
</div>