Does not show pseudo-classes, how to fix in IE11?

Question

I have such a code in Chrome and in Firefox it works fine, but in IE11 the after and befor pseudo-classes are not displayed. Therefore, I can’t insert the picture I need. What is wrong, how to fix it?

    .contact .contact-form form .wpcf7-list-item label {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      color: #000;
      cursor: default;
      font-weight: normal;
      line-height: 30px;
      vertical-align: middle; }
      .contact .contact-form form .wpcf7-list-item label input[type=checkbox] {
        -moz-appearance:initial;
        width: auto !important;
        display: block;
        cursor: pointer;
        font-size: 13px;
        visibility: hidden;
        -webkit-transform: scale(1.5);
        transform: scale(1.5); }
      .contact .contact-form form .wpcf7-list-item label input[type=checkbox]:after {
        content: " ";
        background-color: #fff;
        display: inline-block;
        color: #00BFF0;
        width: 13px;
        height: 13px;
        visibility: visible;
        border: 1px solid #FFF;
        padding: 0 6px 0 1px;
        margin: 2px 0;
        border: 1px solid #222222; }
      .contact .contact-form form .wpcf7-list-item label input[type=checkbox]:checked:after {
        content: url(../images/Group.svg);
        font-weight: bold;
        background: #9BAE88;
        border: none;
        color: black; }
      .contact .contact-form form .wpcf7-list-item label .wpcf7-list-item-label {
        padding-left: 22px;
        margin-top: -5px; }
  .contact .contact-form form .wpcf7-not-valid-tip {
    font-size: 13px;
    font-family: "JosefinSans",sans-serif;
    font-weight: lighter; }
  .contact .contact-form form .wpcf7-not-valid-tip:before {
    content: url(../images/Warning.svg);
    width: 100%;
    border-bottom: solid 1px #fff;
    margin-right: 10px;
    line-height: 35px; }

It would help if you provided a [mcve] (your CSS doesn't seem minimal and, without the HTML, it isn't really reproducible) — Quentin, Jan 09 '20 at 10:40
`before` and `after` are not pseudo-classes, they are pseudo-elements. use double colon to separate the keywords. — Teemu, Jan 09 '20 at 10:41
The problem is not the `:before`, even though you are right and it should be `::before`. — Sagi Rika, Jan 09 '20 at 10:44
@AndrewL64 — While the syntax for pseudo-elements changed from `:` to `::` between CSS 2 and CSS 3, the CSS 2 syntax *still works*. It isn't the cause of the problem. It's worthy of comment, but not the answer. — Quentin, Jan 09 '20 at 10:44
@Quentin Thanks for the heads up. Retracting the close vote now. — AndrewL64, Jan 09 '20 at 10:44
Does this answer your question? [:after, :before issues in internet explorer 11](https://stackoverflow.com/questions/25339854/after-before-issues-in-internet-explorer-11) — Basil, Jan 09 '20 at 10:45
@Utkanos: “For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, `:first-line`, `:first-letter`, `:before` and `:after`). This compatibility is not allowed for the new pseudo-elements introduced in this specification.” (https://www.w3.org/TR/selectors-3/#pseudo-elements) — David Thomas, Jan 09 '20 at 10:48
Nikita: please, as Quentin implicitly asked, post your [mcve] code, which should be the *minimum* necessary code to reproduce your problem. We need to see your html to see what the css is applied to and we need less css in order to focus on the specific problem, — David Thomas, Jan 09 '20 at 10:54
I tried making a test case — https://jsbin.com/gutezidego/edit?html,output — and it works fine in IE11. — Quentin, Jan 09 '20 at 10:54
When I extract the first pseudo-element in your CSS, and simplify the selector, it works fine in IE11. Make sure you're running the page in standards mode, and check that all the elements the complex selector refers exist. — Teemu, Jan 09 '20 at 10:54
yes, it refers to input, but it may not work due to the fact that input is not a closing tag — Nikita Kurilovic, Jan 09 '20 at 10:59
@NikitaKurilovic — If only you'd provided the [mcve] that was asked for 25 minutes ago, it would have saved a lot of time. — Quentin, Jan 09 '20 at 11:06
Duplicate: https://stackoverflow.com/questions/2587669/can-i-use-a-before-or-after-pseudo-element-on-an-input-field — Quentin, Jan 09 '20 at 11:06

score 0 · Answer 1 · answered Jan 09 '20 at 15:36

Please refer to the following sample, you could add a <span> tag outside the input elements. Then, add the pseudo-element to the <span> tag.

<span class="input-icon">
    <input type="text" class="input" value="" placeholder="name" />
</span>

Then using the following CSS style:

<style>
    .input {
        background: none;
        border-radius: 3px;
        border: 1px solid;
        box-sizing: border-box;
        cursor: pointer;
        font-size: 20px;
        line-height: normal;
        padding: 1em 2em 1em 3em;
        text-transform: uppercase;
    }
    input :hover, :focus {
        background: rgba(0,0,0,.05);
    }
    .input-icon {
        display: inline-block;
        position: relative;
    }
    .input-icon::before {
        background: url(http://www.scottohara.me/assets/img/scott.jpg) no-repeat center center;
        background-size: 100% auto;
        content: '';
        pointer-events: none;
        height: 100%;
        left: .5em;
        position: absolute;
        top: 0;
        width: 2em;
    }
</style>

The output as below:

How do I convert my checkbox in this way and insert my checkmark? — Nikita Kurilovic, Jan 10 '20 at 06:54
By using the above code, you could change the input type from `text` to `checkbox` type, but I'm not sure whether it achieves your requirement. what's your checkmark looks like? Can you create a Minimal, Reproducible Example (using [Codepen](https://codepen.io/pen/) or [jsfiddle](http://jsfiddle.net/tpus18v4/)) and capture a screenshot about the checkmark? It might be easier for us to help you solve the problem. Besides, here is a thread about [how to use a checkmark as a checkbox](https://stackoverflow.com/questions/48300457/how-to-use-a-checkmark-as-a-checkbox-in-css), you could check it. — Zhi Lv, Jan 10 '20 at 08:56

Sagi Rika · Answer 2 · 2020-01-09T11:00:01.413

-2

The problem is that you can't use pseudo elements on replaced elements. As taken from MDN:

The pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as <img> or <br>.

You can read more about replaced elements here.

I'd suggest that you wrap your inputs with a div, and use ::after on it.

edited Jan 09 '20 at 11:00

answered Jan 09 '20 at 10:41

Sagi Rika

2,839
1
12
32

@NikitaKurilovic I edited my comment. Please review it. – Sagi Rika Jan 09 '20 at 10:51
1

https://jsbin.com/gutezidego/edit?html,output — I tested it in IE. There's no need to add `display` – Quentin Jan 09 '20 at 10:54
it may not work due to the fact that input is not a closing tag – Nikita Kurilovic Jan 09 '20 at 10:59
Look at the links I provided, it should explain. – Sagi Rika Jan 09 '20 at 11:00

Does not show pseudo-classes, how to fix in IE11?

2 Answers2