CSS3の疑似要素 :afterについて

2016/06/23 21:36

このQ&Aのポイント

CSS3の疑似要素 :afterを使用して、テキストの右側に階層を示す”＞”を付けたい。
Chomeでの表示では、以下のようになっている。
HTMI5表示では、<div id='breadcrumb'>の中に<ol>タグがあり、その中に<li>タグが並んでいる。これに対してCSS3を使用し、#breadcrumb ol li::afterのcontentプロパティに”>”を設定することで、テキストの右側に”＞”を表示しようとしたがうまくいかない。

inbamai
お礼率49% (67/136)

CSS
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

roid_moon
ベストアンサー率58% (10/17)

2016/06/24 12:38 回答No.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)

2016/06/23 23:16 回答No.1

「::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;》なども必要です。