写真のような: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
イメージでパディングとマージンを使用できれば完璧です。それは想定です。しかし、何らかの理由で、それは私のために働いていません。水平方向のパディングとマージンを追加できますが、上下のパディングは何もしません。なぜそうなるのでしょうか?
background
の代わりにcontent
を使用して、content
にプレースホルダーを入れてみてください。 http://jsfiddle.net/7X7x2/1/
コンテンツを移動するには、次のコードを使用できます。
div.read-more a:before {
content: "\00BB \0020";
position: relative;
top: -2px;
}
画像をテキストの近くにのみ配置する場合は、おそらく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を使用します)
これは、マウスオーバーでの私の解決策でした:
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);
}
@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;
}
.read-moreに対して相対的な位置を作成する必要があります。その後、位置を変更できます。