IEは疑似要素CSSを取り消しますか？

IEで動作するようにいくつかの疑似要素を取得しようとしていますが、それではうまくいきません。

それはCSSを消し去り、そこにないように振る舞います、それはちょっと私を悪化させます。

誰かが私が間違っていることを知っていますか？

.newbutton {
  border-radius: 50%;
  width: 74px;
  height: 74px;
  position: relative;
  background-color: black;
  margin: 60px 0px 25px 17px;
  overflow: visible;
}

.newbutton:before {
  content: "f";
  width: 80px;
  height: 80px;
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  top: 37px;
  left: 37px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation-name: fadecolor;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-name: fadecolor;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

.newbutton:after {
  content: "";
  width: 80px;
  height: 80px;
  position: absolute;
  border-radius: 50%;
  z-index: -2;
  top: -3px;
  left: -3px;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#01BAE8), to(#0183D5));
}

<div class="starttour">
  <div class="newbutton headerbutton">
    <span class="iconhead icon-02-arrow-icon"></span>
  </div>
  <p>START TOUR</p>
</div>

何が起こるかのスクリーンショット：

これは既知の問題ですが、実際にはスタイルが適用されています。開発ツールは、疑似要素のスタイルが、対応するスタイルの親要素によって上書きされていると考えています。これは、親要素のComputedスタイルを調べ、競合するスタイル（F12ツールが何であると信じているか）を調べることで簡単に実証できます。

ただし、繰り返しになりますが、これらのスタイルは実際には正しい要素に適用されています-開発者ツールが何を信じたり提案したりしても。これを確認するには、親要素と2つの疑似要素を実行し、計算された高さをログに記録します。

(function () {

    var el = document.querySelector( ".newbutton" );

    [ "", "::before", "::after" ].forEach(function ( e ) {
        // Output: 74px, 80px, 80px
        console.log( window.getComputedStyle( el, e ).height );
    });

}());

このバグを追跡する内部の問題がすでにあるかどうかを確認し、この質問を追加します。一般的に言って、私たちはこのような問題に、問題が現実の世界で引き起こしている悲しみの量に比例した注意の量を与えるようにしています。したがって、チケットに新たに追加されたものとして質問があると、修正を進めるのに役立つ場合があります:)

私はこれとまったく同じ問題を抱えていました！自分の要素:beforeと:after疑似要素にdisplayプロパティを与える必要があります。

:beforeおよびに以下を追加します:after。

display: block; 

これで問題が解決するはずです。:)

上記の答えに追加します。display：blockを試しましたが、背景画像が歪んで表示されていました。代わりに、以下を使用しました。

display: inline-block;

これにより、：before：after内の画像が歪む問題が修正されました

Material FontとIE11で同じ問題が発生し、上記のソリューションでは解決できなかったため、さらに調べました。

マテリアルデザインアイコンのドキュメントには、使用することが記載されています

<i class="material-icons">&#xE87C;</i>

合字をサポートしていないブラウザの場合。各アイテムのコードポイントはここにリストされています：https：//github.com/google/material-design-icons/blob/master/iconfont/codepoints

：after要素の問題は、content-TagのHTMLが＆＃x ..を示すプレーンテキストとしてレンダリングされるため、次のように\エスケープを使用する必要があることです。

content:  "\e5c5";

私はこれとまったく同じ問題を抱えていました！疑似要素の親にoverflow : visibleプロパティを指定する必要があります。

このリンクから引用されているように、このリンク「http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field」をチェックしてください

：afterおよび：beforeは、Internet Explorer7以下のどの要素でもサポートされていません。

また、フォーム要素（入力）や画像要素などの置き換えられた要素で使用することも意図されていません。

言い換えれば、純粋なCSSでは不可能です。

/ * *トリックはここにあります：*このセレクターは「入力テキスト（+）の後の最初のdom要素を取り、その前のコンテンツを*値（：before）に設定します。* /

input#myTextField + *:before {
       content: "👍";
    }