[HTML & CSS General] CSS: div box の後に画像を配置して位置を調整する

memo.

[markdown]
こうしたい（IE8+）。
`content: url()` ではなく `background: url()` で画像を表示します。

> * [css3 – CSS: using image sprites with css pseudo classes :before and :after – Stack Overflow](http://stackoverflow.com/questions/7065069/css-using-image-sprites-with-css-pseudo-classes-before-and-after)
> * [Edit fiddle – JSFiddle](http://jsfiddle.net/RvRxY/1/)

多分にメモ的な内容なので参考程度。

“`css:style.scss
.item {
position: relative;
@extend %clearfix;
.thumb {
float: left;
padding: 0 20px 20px 0;
}
.title {
font-weight: bold;
padding-top: 0;
}
p {
overflow: hidden;
@extend %font-size-14;
}
padding-bottom: 3em;
&:after {
background-image: image-url(‘hr.png’);
content: ” “;
position: absolute;
right: 0;
bottom: 0;
width: 700px;
height: 2px;
margin-bottom: 2em;
}
}
“`

あわせて `overflow: hidden` でテキストの回り込みをコントロールします。

> * [[CSS]overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス](http://coliss.com/articles/build-websites/operation/css/css-clearing-floats-with-overflow-by-webdesignerwall.html)

[/markdown]