HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


HTMLタグボードトップ >> 今すぐ使える!便利ツール >> スタイルシート(CSS)辞典 >> スタイルシートの基本 >> セレクタ内の文字の最初と最後に働くスタイルシート

セレクタ内の文字の最初と最後に働くスタイルシート

CSS/HTMLの書き方

CSS
セレクタ:before { content:文字など ; プロパティ:値 ; …}
セレクタ:after { content:文字など ; プロパティ:値 ; …}

CSSの詳細情報
対応ブラウザ Windows MAC
FF1.0/NS7.1/OP8.0 SF
CSSレベル CSSレベル2

解説

セレクタの最初と最後に文字や記号を追加して表示するスタイルシートの書き方です。例えば、見出しに章番号を付けたり、項目の前に記号を付けたりすることが出来ます。なお、CSSのセレクタの後に書く「:before/after」は擬似要素の一種です。

書き方は、スタイルシートを適用したいセレクタ名の後に「:beforeもしくは:after」を書きます。「:before」は対象のセレクタの冒頭に文字や記号を追加して表示し、一方「:after」は文末に追加することを指定する擬似要素です。

なお、この書き方はInternetExplorer5.0/5.5/6.0/7.0には対応していません。

contentプロパティで追加文字を設定

『CSSの書き方』にあるように、これらの擬似要素によってセレクタに追加する文字は「content:文字列など」で指定します。例えば、★を追加したいのであれば、「content:"★"」、画像を追加したいのであれば、「content:url(ファイルのURI)」のようにそのurlを指定します。

CSS/HTMLサンプル

h1:before,h2:before { content:"■"; color:navy ; }

見出しの前に藍色の■マークを追加 サンプル

次のページへ >>