0

Hello I'm trying to use ::after to put some text after a submit button, I tried to use this on a <p> element and it works fine, but on form elements of input it doesn't work.

here is my code:

<!DOCTYPE html>
<html>
<head>
<style> 
input[type='submit']::after {
content: 'some text';
}


</style>
</head>
<body> 

<form>
  
  <input type='submit'> 
</form>

</body>
</html>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
zb22
  • 3,126
  • 3
  • 19
  • 34
  • 3
    `pseudo-elements` won't apply to void elements like `input` and `img` – UncaughtTypeError Oct 13 '17 at 14:05
  • 1
    see also here: https://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field – cloned Oct 13 '17 at 14:06
  • In a nutshell: `pseudo-elements` only apply to "container" elements, or elements which can contain other elements, and not "self-closing" elements which cannot contain other elements. – UncaughtTypeError Oct 13 '17 at 14:16

1 Answers1

3

It's impossible to apply pseudoclass for <img> , <input>.

Explanation

In HTML there having some empty elements listed below,

<area>
<base>
<br>
<col>
<embed>
<hr>
<img>
<input>
<keygen>(HTML 5.2 Draft removed)
<link>
<meta>
<param>
<source>
<track>
<wbr>

My understanding is that you can’t use pseudo elements for empty elements, which doesn't have any closing tag.

Satheesh Kumar
  • 2,205
  • 1
  • 16
  • 31