スタイルシートの擬似要素after、beforeで前後に文字や画像を入れることができる

 スタイルシートの擬似要素というのを使うと、ちょっと面白いことができる。

 擬似要素の代表的なafter、beforeについてちょっとメモ代わりに書いておく。

スタイルシートの擬似要素after、beforeでできること

 スタイルシートの擬似要素を使うと、前後に文章や画像、音声などいろいろなものをくっけることができる。

 具体的には、

・画像を使わずにリストマークのようなものをリンクの先頭や後ろにつける。

・指定した部分に定型文(画像、音声などを含む)を入れる。

表示できるブラウザの種類

 7以前のIEには対応していない。

擬似要素after 

 後ろに付け加える。

擬似要素before 

 前に付け加える。

 擬似要素のafterとbeforeはブロック要素でもインライン要素でも利用できる。

擬似要素afterの利用例

スタイルシートの記載例

h3:after {content:"⇒";}

HTLの記載例

<h3>「今日の話題は擬似要素の使い方」</h3>

ブラウザの表示

「今日の話題は擬似要素の使い方」⇒

擬似要素beforeの利用例

スタイルシートの記載例)

h3:before {content:"⇒";}

HTLの記載例

<h3>「今日の話題は擬似要素の使い方」</h3>

ブラウザの表示

⇒「今日の話題は擬似要素の使い方」

ほかにもあるスタイルシートの擬似要素

擬似要素first-line

 ブロックレベル要素の最初の行を対象にスタイルを適用する。

擬似要素first-letter

 ブロックレベル要素の最初の文字を対象にスタイルを適用する。

 first-line、first-letterはインライン要素には適用できない。

おすすめ記事

コメントを残す




*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

Bloggerで半角ダブルクォーテーション(")が自動で全角変換にされてしまう設定を変更しよう
WordPressテーマTwenty Fourteen(バージョン 3.9.1)で記事下に広告を表示
シーサーブログの最近の記事の設定の仕方
WordPressコメントフォームのメールアドレス記入を必須項目からはずしてプラグインで注意事項を書き加えてみた
GoogleBloggeの投稿者名を消す方法がわかったので皆さんにお知らせ
テキストモードにクイックタグを追加-WordPress投稿の編集のカスタマイズ
FC2ブログの管理画面が新しくなったけど、使いにくくなった
JavaScriptを使った文字数チェッカー-全角半角共1文字と数える
プラグインのCSS(スタイルシート)を縮小してブログの表示速度を早くしよう
wordpressの管理画面に入れなくなった場合の一番確実な解決法
WordPress4.0にバージョンアップしたらプラグインのインストールがわかりにくくなった
レンタルサーバー・ミニバードへの仮登録方法
Googleカスタム検索をスタイルシートでカスタマイズ-コードは変更しないよ
スタイルシート(CSS)を縮小・具体例
Googleアドセンスの新しい管理画面は、解析能力が優秀

Menu

HOME

 TOP