before・after擬似要素 要素の始めと終わりに挿入する方法

before・after擬似要素

ビフォー・アフター擬似要素は、指定した要素の始めと終わりに文字列画像スタイルシートから挿入することが出来ます。

before擬似要素
要素名:before{content:値}

after擬似要素
要素名:after{content:値}


beforeafter擬似要素ではcontentプロパティを使用して使います。before擬似要素は指定した要素の始まりに、after擬似要素は指定した要素の終わりに、それぞれ文字列や画像を挿入します。

使用例


文字列挿入
p :before{content:"はじまり"}

画像挿入
p :after{content:url("パス")}


この記述の場合p要素の始まりに「はじまり」という文字列挿入され、p要素の終わりに画像挿入されることになります。



ある要素の始まりや、終わりに挿入したい文字列や画像を挿入したい時に便利です。CSSファイルを編集すればHTMLファイルの内容も変更できるので便利です。







カテゴリ | CSS | このブログの読者になる | 更新情報をチェックする

About Site(サイト案内) 概要

アクセスアップ方法・アクセスアップツールを中心に紹介しています。出来るだけ易しいサイト作りを目指したいと思います。まだまだコンテンツが少ないですが確実なアクセスアップ方法を紹介しますのでどうぞ宜しくお願いします。アクセスアップ記事以外にもWeb製作のことやiPhoneのこと。ニュースなども取り上げていきます。


◆リンク
http://secretaccess.seesaa.net/
タイトルは『Digital Life -デジタルライフ-
(テキストリンクのみです)
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。