[CSS] divの下に幅指定して線を引っ張る

[CSS] divの下に幅指定して線を引っ張る



2013-12-09_13h27_10
サムネイルの下にキャプションを表示して、その下に線を引きたかったのだけど、そのままborder設定すると、divの幅になるし、かと言って、そのために<span>を追加する、というのも面倒なので、cssの:after擬似要素をつかってみました。

<div class="image">
	<img src="http://dummyimage.com/600x400/000/fff"/>
	<p class="caption">キャプション</p>
</div>
div.image{
	width: 600px;
}
div.image:after {
	content: "";
	display: block;
	width: 250px;
	margin: auto;
	border: 1px solid #ccc;
}
p.caption {
	text-align: center;
}
今日はここまで

関連する記事



こちらはいかが?


IconMoonでロゴをWEBフォントにしてみます。
IconMoonでロゴをWEBフォントにしてみます。

まずはロゴにしたいSVGファイルをIllustratorなどで作成しておきます。ファイルは全てアウトライン化しておきます。 ①IconMoonのAppにアクセスして、「Start the App」ボタンをクリックします。…

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*(必須)

*(必須・表示されません)