不显示伪类，如何在 IE11 中修复？答案

【问题标题】：Does not show pseudo-classes, how to fix in IE11?不显示伪类，如何在 IE11 中修复？
【发布时间】：2020-04-26 22:45:28
【问题描述】：

我在 Chrome 和 Firefox 中有这样的代码，它工作正常，但在 IE11 中，伪类之后和之前没有显示。因此，我无法插入我需要的图片。出了什么问题，如何解决？

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

【问题讨论】：

如果您提供 minimal reproducible example 会有所帮助（您的 CSS 看起来不是最小的，而且如果没有 HTML，它就无法真正重现）
::before 和 ::after，而不是 :before/:after
Nikita：请按照 Quentin 隐含的要求，发布您的 minimal reproducible example 代码，这应该是重现您的问题的最少必要代码。我们需要查看您的 html 以了解 css 应用于什么，并且我们需要较少的 css 以便专注于特定问题，
是的，它指的是输入，但由于输入不是结束标记，它可能不起作用
@NikitaKurilovic — 如果您提供了 25 分钟前要求的 minimal reproducible example，那会节省很多时间。

标签： javascript css internet-explorer-11

【解决方案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>

输出如下：

【讨论】：

如何以这种方式转换我的复选框并插入我的复选标记？
通过使用上面的代码，你可以将输入类型从text更改为checkbox类型，但我不确定它是否达到你的要求。你的复选标记是什么样的？你能创建一个最小的、可重现的示例（使用Codepen 或jsfiddle）并捕获有关复选标记的屏幕截图吗？我们可能更容易帮助您解决问题。另外，这里有一个关于how to use a checkmark as a checkbox的帖子，你可以查一下。

【解决方案2】：

问题是您不能在替换元素上使用伪元素。取自 MDN：

::before 和::after 生成的伪元素包含在元素的格式化框内，因此不适用于<img> 或<br> 等替换元素。

您可以阅读有关替换元素的更多信息here。

我建议您使用 div 包装您的输入，并在其上使用 ::after。

【讨论】：

@NikitaKurilovic 我编辑了我的评论。请检查它。
jsbin.com/gutezidego/edit?html,output — 我在 IE 中测试过它。不用加display
由于输入不是结束标签，它可能不起作用
看看我提供的链接，应该能解释清楚。