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

memo.

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

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

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 でテキストの回り込みをコントロールします。

2014-09-09_css_01