How to add :after :before on submit button?

Question

I am trying to add :after/:before element on a submit button, but it not working for me.

Actually I need to add swipe(Sweep To Right) transition effect on the button from left to right. Like - 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;}

https://stackoverflow.com/questions/2587669/can-i-use-a-before-or-after-pseudo-element-on-an-input-field — Professor Abronsius, May 03 '19 at 07:15

DreamTeK · Answer 1 · 2021-04-08T09:26:03.320

3

Input elements do not support pseudo-elements.

As per the specification:

The :before and :after pseudo-elements interact with other boxes as if they were real elements inserted just inside their associated element.

What this means is pseudo-elements can only be used on container elements and input elements cannot contain other elements and as such cannot support them.

WORKAROUND

To achieve what you are after you could simply wrap the input in a container:

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

edited Apr 08 '21 at 09:26

answered May 03 '19 at 07:25

DreamTeK

32,537
27
112
171

You have added the yellow background on "submitWrap" div, but in that way how can I access submit button? also can't find "value" of the button here. – jqueryHub May 03 '19 at 08:34
You will need to include a z-index for positioned elements. See changes above. – DreamTeK May 03 '19 at 09:35

How to add :after :before on submit button?

1 Answers1