Не показывает псевдоклассы, как исправить в IE11?

Question

У меня есть такой код в Chrome и в Firefox он работает нормально, но в IE11 псевдоклассы after и befor не отображаются. Поэтому я не могу вставить нужную мне картинку. Что не так, как это исправить?

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

Answer 1

Пожалуйста, обратитесь к следующему примеру, вы можете добавить тег <span> вне элементов ввода. Затем добавьте псевдоэлемент к тегу <span>.

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

Затем используйте следующий стиль CSS:

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

Вывод, как показано ниже:

Answer 2

Проблема в том, что вы не можете использовать псевдоэлементы на замененных элементах. Как взято из MDN:

Псевдоэлементы, сгенерированные ::before и ::after, содержатся в поле форматирования элемента и, следовательно, не применяются к замененным элементам, таким как <img> или <br>.

Вы можете узнать больше о замененных элементах здесь .

Я бы посоветовал вам обернуть свои входные данные в div и использовать ::after на нем.