装飾的な要素やアイコンなど、HTMLとして特別な意味を持たないパーツをコーディングする際に、空の <div> や <span> を追加するのではなく擬似要素を利用することも多いと思います。

擬似要素に対してもCSSによるスタイリングやアニメーションが設定可能ですが、IE10において:hover擬似クラスと複合させた際の挙動が他のブラウザと異なる場合があったので、解決策をまとめておきます。

IE10では:hover時に::before要素のスタイルが変更されない例

この例では、div.parent を:hoverした際に::before擬似要素の背景色を黒→赤に変更しようとしています。
しかしIE10ではスタイルの変更が反映されず、:hover時にも背景色は黒のままとなります。

See the Pen qiita_e5238c1e6aa59bf8050c_01 by Sho Uchida (@shouchida) on CodePen.

<div class="parent">コンテンツ</div>

.parent::before {
  content: '';
  display: block;
  height: 100px;
  background: black;
}

.parent:hover::before {
  background: red;
}

<a href="#" class="parent">コンテンツ</a>

.parent {
  display: block;
}

.parent::before {
  content: '';
  display: block;
  height: 100px;
  background: black;
}

.parent:hover::before {
  background: red;
}

<div class="hover-target">
<div class="parent">コンテンツ</div>
</div>

.parent::before {
  content: '';
  display: block;
  height: 100px;
  background: black;
}

.hover-target:hover .parent::before {
  background: red;
}

<div class="parent">コンテンツ</div>

.parent::before {
  content: '';
  display: block;
  height: 100px;
  background: black;
}

.parent:hover {
  /* プロパティ指定は空でもよい */
}

.parent:hover::before {
  background: red;
}