[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;
}
今日はここまで
[CSS] divの下に幅指定して線を引っ張る

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


開発

サムネイルの下にキャプションを表示して、その下に線を引きたかったのだけど、そのままborder設定すると、divの幅になるし、かと言って、そのために<span>を追加する、というのも面倒なので、cssの:af…


関連する記事



こちらはいかが?


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

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

コメントを残す