menu
menu

キーワード検索

 

最近の投稿

contentで挿入した画像の中心に元要素のテキストを配置する方法#2

  • Labs

CSS

こんにちは(・∀・)

contentプロパティと疑似要素:afterで挿入した画像の中心に、元要素のテキストを配置する方法についてご紹介します。前回の疑似要素:beforeの時と配置する画像の位置が反対になっただけでやり方はほぼ同じです。

contentプロパティ

contentプロパティを使用して画像を配置する場合、前回の疑似要素:beforeの時と同じく、そのままだと画像の真ん中に元になる要素のテキストは来てくれません。そのような時はどうしたら良いのかもうお分かりですね。

今回もpositionプロパティとネガティブマージンを使用して簡単に解決してしまいましょう。

サンプルデモ

サンプルデモと解説はこちら

サンプルデモ1のHTML

<div class="demo">
<h1>見出し1</h1>
</div>
サンプルデモ1のCSS

.demo h1 {
	background: #eee;
	font-size: 120%;
	margin: 1em 0 2em 0;
}
.demo h1:after {
	content: url(right-arrow.png);
}
サンプルデモ2のHTML

<div class="demo2">
<h1>見出し2</h1>
</div>
<div class="demo3">
<h1>見出し3
見出し3</h1> </div>
サンプルデモ2のCSS

.demo2 h1 {
	position: relative;
	background: #eee;
	font-size: 120%;
	margin: 1em 0 2em 0;
	padding: 0 0 0 10px;
	line-height: 2.3;
}
.demo2 h1:after {
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -20px;
	content: url(right-arrow.png);
}

いかがでしたでしょうか、前回の疑似要素:beforeの時とほぼ同じですね。疑似要素:afterで画像を配置するとき、サンプル2のようにpositionプロパティとネガティブマージンを使えば簡単に元要素のテキストを画像の真ん中に配置することができます。

ちなみに疑似要素:afterでもURLを指定して矢印部分にリンクを張りたいところですが、疑似要素:beforeと同じく疑似要素:afterで配置したオブジェクトには実体がないとみなされてURLを指定することはできません。

関連リンク

contentで挿入した画像の中心に元要素のテキストを配置する方法
content(フォント・テキスト)【CSSリファレンス】

  • カテゴリー:Labs