こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

テキストの右が側に階層を示す”>”を付けたいのですが
Chomeでの表示
|アクセス |お問い合わせ |プライバシーポリシー|
これを
>アクセス >お問い合わせ >プライバシーポリシー>
このようにしたい。
HTMI5表示
<div id="main">
<div id="breadcrumb">
<ol>
<li><a href="index.html">HOME</a></li>after
<li>講座案内</li>after
</ol>
</div>
CSS3の表示
#breadcrumb ol li::after {
content: ">";
padding-left: 7px;
}
上記のようにしても”>”にならないのですが
どこが悪いのでしょうか
よろしくお願いします。

投稿日時 - 2016-06-23 21:36:50

QNo.9191886

困ってます

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

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の対象外のブラウザで見てたりしないですよね?

投稿日時 - 2016-06-24 12:38:16

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

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

参考URL:http://htmq.com/

投稿日時 - 2016-06-23 23:16:56

あなたにオススメの質問