- ベストアンサー
CSS3の疑似要素 :afterについて
- CSS3の疑似要素 :afterを使用して、テキストの右側に階層を示す”＞”を付けたい。
- Chomeでの表示では、以下のようになっている。
- HTMI5表示では、<div id='breadcrumb'>の中に<ol>タグがあり、その中に<li>タグが並んでいる。これに対してCSS3を使用し、#breadcrumb ol li::afterのcontentプロパティに”>”を設定することで、テキストの右側に”＞”を表示しようとしたがうまくいかない。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
Chromeでは以下の記述で問題なく表示されます。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <style> #breadcrumb ol li { list-style:none; display:inline-block; } #breadcrumb ol li::after { content: ">"; padding-left: 7px; display:inline-block; } </style> </head> <body> <div id="main"> <div id="breadcrumb"> <ol> <li><a href="index.html">HOME</a></li> <li>講座案内</li> </ol> </div> </body> </html> 2 コロンの記法 (::after) は CSS 3 で導入されたものですが、まさかのオチでcss3の対象外のブラウザで見てたりしないですよね？
その他の回答 (1)
- Katsu_Kaiz
- ベストアンサー率58% (345/586)
「::after」という部分が間違っているように思います。「::」じゃなくて「:」です。下記のように書くと、たぶんご希望通りになるのではないでしょうか。 <style> #breadcrumb ol li { display: inline-block; } #breadcrumb ol li:after { content: '>'; padding-left: 7px; } </style> <div id="main"> <div id="breadcrumb"> <ol> <li><a href="index.html">HOME</a></li> <li>講座案内</li> </ol> </div> </div> なお、<li>を横に並べて表示させるには、《display: inline-block;》または《float: left;》なども必要です。
- 参考URL：
- http://htmq.com/
