web-dev-qa-db-ja.com

擬似要素の前に配置する適切な方法

写真のような:beforeおよび:after擬似要素を配置する適切な方法は何ですか？私はさまざまな方法をいじりましたが、どれも非常にエレガントなソリューションのようには見えません。

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

enter image description here

これは私がやったことです：

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イメージでパディングとマージンを使用できれば完璧です。それは想定です。しかし、何らかの理由で、それは私のために働いていません。水平方向のパディングとマージンを追加できますが、上下のパディングは何もしません。なぜそうなるのでしょうか？

csspseudo-element
26
Syren

backgroundの代わりにcontentを使用して、contentにプレースホルダーを入れてみてください。 http://jsfiddle.net/7X7x2/1/

18
Richard JP Le Guen

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

div.read-more a:before {
  content: "\00BB \0020";
  position: relative;
  top: -2px;
}
23
Ricardo Huertas

画像をテキストの近くにのみ配置する場合は、おそらく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を使用します）

12
Alexey Ivanov

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

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);
}
2
Bas

@Richard JP Le Guenのフィドルを編集して、要求されたバージョンともう少し一致するようにしました

HTML

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

CSS

div.read-more a:before {
    background: url('http://i.stack.imgur.com/XyerX.jpg') CENTER CENTER NO-REPEAT;
    content:"";
    width:21px;
    height:21px;
    display: inline-block;
    vertical-align: sub;
    margin-right: 4px;
    line-height: 21px;
}
div.read-more {
    background: red;
    line-height: 21px;
    display:block;
    vertical-align:middle;
    width: max-content;
    padding: 4px;
}
div.read-more a{
    color: white;
    text-decoration:none;
}

http://jsfiddle.net/7X7x2/688/

0
thebigsmileXD

.read-moreに対して相対的な位置を作成する必要があります。その後、位置を変更できます。

0
Bunty