contentプロパティでコンテンツを追加する(3):FirefoxとSafariのCSS

エ・ビスコム・テック・ラボ
2008-07-28 17:50:01
  • このエントリーをはてなブックマークに追加

括弧で囲む

 contentプロパティを「open-quote」や「close-quote」と指定すると、文字列を括弧で囲むことができる。「open-quote」は始め括弧を、「close-quote」は終わり括弧の追加を指定する値だ。

 また、追加する括弧の種類はquotesプロパティで指定する。たとえば、以下のように指定すると

でマークアップした見出しをカギ括弧「 」で囲んで表示する。

 なお、括弧で囲む処理にはFirefoxとOperaは対応しているが、Safariは対応していない。また、Internet Explorerもバージョン8(ベータ版)を含めて未対応となっている。

Firefoxでの表示 Firefoxでの表示
h1:before{
content: open-quote;
}

h1:after{
content: close-quote;
}

h1{
quotes: "「" "」";
}

こんにちは

ブラウザで表示を確認する

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]