css :disabled::after not working -

can't seem following selector working.

am doing wrong?

   html body div#main_container form#account_info input[type=text]:disabled::after, input[type=email]:disabled::after {      content: "dfjnsfnj";      position: absolute; float: none; clear: both; display: block;      top: 0; left: 0;      width: 100px; height: 100px; margin: 0; padding: 0;       font-family: "open sans", sans-serif; font-weight: 600; font-size: 25px; line-height: 25px; text-align: left;      letter-spacing: -3px;      color: #3d5a71;      background-color: red;    } 

while verified construct work in current chrome stable, seems unfortunate by-effect of generic parsing.

input specified in html5 standards having "empty" content model, other self-closing elements such <br> , <img>. of them therefore not permitted, in situation, have child elements. including pseudo-elements.

your problem solved including markup, insert generated content in more plausible location in doctree child element of checkbox. following example works fine , semantically correct:

input:disabled[type=checkbox] + label:after {    content:' testing css';  }

<input disabled type="checkbox">  <label>checkbox for</label>