[HTML & CSS General] CSS: div box の後に画像を配置して位置を調整する
memo.
こうしたい(IE8+)。
content: url()
ではなく background: url()
で画像を表示します。
多分にメモ的な内容なので参考程度。
.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
でテキストの回り込みをコントロールします。