32

:before写真のような要素や:after疑似要素を配置する適切な方法は何ですか？私はさまざまな方法をいじっていますが、どれも非常にエレガントな解決策のようには見えません。

これが私がやろうとしていることです：

ここに画像の説明を入力してください

これは私がしたことです：

div.read-more a:before {
    content: url('/images/read_more_arrow_sm.png');
    position: absolute;
    top: 4px;
    left: -15px;
}

<div class="read-more">
    <a href="#">Read More</a>
</div>

基本的には、画像をテキストに揃えたいだけです。それを行う別の方法はありますか？

:before画像にパディングとマージンを使用できれば完璧です。それがあなたの仕事のはずです。しかし、何らかの理由で、それは私にとってはうまくいきませんでした。水平方向のパディングとマージンを追加できますが、上下のパディングは何もしません。なぜそれが起こるのでしょうか？

4

4 に答える 4

39

コンテンツを移動するには、次のコードを使用できます。

div.read-more a:before {
  content: "\00BB \0020";
  position: relative;
  top: -2px;
}
于 2013-05-05T17:59:12.753 に答える
21

backgroundの代わりに使用してみてcontent、プレースホルダーを入れてくださいcontent：

div.read-more a:before {
  background: url('https://i.stack.imgur.com/XyerX.jpg') CENTER CENTER NO-REPEAT;
  content: url('https://i.stack.imgur.com/Icd9n.png');
  /* 21x21 transparent pixels */
  width: 21px;
  height: 21px;
}
<div class="read-more">
  <a href="#">Read More</a>
</div>

https://jsfiddle.net/7X7x2/1/

于 2011-10-24T19:31:17.280 に答える
15

画像をテキストの近くに配置したいだけなら、おそらく vertical -align プロパティが必要です:

div.read-more a:before {
    vertical-align: bottom;
    content: url(image.png);
}

可能な値は次のとおりです。baseline、sub、super、top、text-top、middle、bottom、text-bottom

これは、現在のテキスト行のテキストの位置から計算された値です (詳細は例を参照してください)。

完全なリファレンス: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

(テキストの前にスペースを追加するには、margin-right を使用します)

于 2011-10-24T20:02:40.703 に答える
2

これは、マウスオーバーによる私の解決策でした：

div.read-more a:before {
    content: url(image.png);
    position: relative;
    top: 3px;
    left: -7px;
    padding-left: 7px;
}
div.read-more a:hover:before {
    content: url(image_hover.png);
}
于 2014-11-13T12:44:54.427 に答える