如何在提交按钮上添加 :after :before？ [复制]

Question

我正在尝试在提交按钮上添加 :after/:before 元素，但它对我不起作用。

其实我需要在按钮上从左到右添加 swipe(Sweep To Right) 过渡效果。喜欢-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

输入元素不支持伪元素。

按照规范：

:before 和 :after 伪元素与其他框的交互就像 它们是插入到相关元素中的真实元素。

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

---

解决方法

要实现你的目标，你可以简单地将输入包装在一个容器中：

.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>