【问题标题】:How to add :after :before on submit button? [duplicate]如何在提交按钮上添加 :after :before? [复制]
【发布时间】:2019-09-21 17:01:21
【问题描述】:

我正在尝试在提交按钮上添加 :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;}

【问题讨论】:

标签: html css


【解决方案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>

【讨论】:

  • 您已经在“submitWrap” div 上添加了黄色背景,但是这样我怎样才能访问提交按钮?在这里也找不到按钮的“价值”。
  • 您需要为定位元素添加一个 z-index。请参阅上面的更改。
猜你喜欢
  • 2014-08-13
  • 2017-02-26
  • 1970-01-01
  • 2012-03-15
  • 2020-05-17
  • 2016-01-07
  • 1970-01-01
  • 1970-01-01
  • 2011-11-29
相关资源
最近更新 更多