menu
menu

キーワード検索

 

8月更新・前月(7月)の人気記事トップ10 - 8/1/2019

  1. ( 2 ↑) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 1 ↓) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 6 ↑) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 3 ↓) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  5. ( 7 ↑) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  6. ( 4 ↓) 【Mac】Safariでソースコードを見る方法
  7. ( 8 ↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  8. ( 9 ↑) 【制作Tips】画面解像度一覧表
  9. (圏外↑) 【Perl】Windows 10にActivePerlをインストール
  10. (圏外↑) 【jQuery】入門5. jQueryで日時を表示
このエントリーをはてなブックマークに追加

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

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

こんにちは(・∀・)

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);
}
Result

サンプルデモと解説


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

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

関連リンク

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

  • content CSS
このエントリーをはてなブックマークに追加