Question

我试图在提交按钮上添加：after /：before元素，但对我不起作用。

实际上，我需要在按钮上从左向右添加滑动（向右滑动）过渡效果。像-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伪元素与其他框交互，就像它们是插入其关联元素内的真实元素。

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

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>

如何在提交按钮前添加：after：before？

1 个答案: