2

2 つのフォント アイコンを上下に配置したいと考えています。だから私はそれを次のように使うことができます：

<span class="icon1-on-icon2" />

これを達成するために CSS クラスを定義することは可能ですか? スパン内で別の要素を使用することは許可されていません。つまり、次のようなものです。

<span class="stack">
   <span class="icon1"/>
   <span class="icon2" />
</span>
4

1 に答える 1

3

確かに、:after および :before 疑似セレクターを使用しないのはなぜですか?

CSS

.font-icon {
  height: 40px;
  width: 20px;
}

.font-icon:after, .font-icon:before {
  color: white;
  content: '';
  display: block;
  font-family: 'your-font-icon';
  height: 20px;
  position: relative;
  width: 20px;
}

.font-icon:before {
  background: red;
  content: 'h';
}

.font-icon:after {
  background: blue;
  content: 'g';
}

HTML

<span class='font-icon'></span>

Codepen スケッチはこちら: http://cdpn.io/lehzr

アップデート

それらを互いの上に配置するには、位置を絶対に変更し、コンテナ要素に相対を配置し、後と前の両方で上と左を 0 に設定します。

例: http://cdpn.io/lehzr

それが役立つことを願っています!

于 2013-08-17T23:34:36.027 に答える