css3でボタンの中にアイコンを表示するには？ - Webデザイン・CSS - 教えて！goo

　なお、内容の追加は、CSS2.1のプロパティです。2.0より多少変更もありますので注意してください。(ブラウザベンダーはCSS2.1のほうを採用しています)
C.4.21 12.1 The :before and :after pseudo-elements ( http://www.d-toybox.com/spec/CSS2.1/appendixC/#q83 )
以降。

★CSS3の魅力はわかりますが、その前にCSS2.1をしっかり身につけておいたほうが良いです。
　ウェブなんて、しょせん「内容あって幾ら」の世界で、プレゼンテーションなんて二の次三の次・・です。自己満足の部分が多々あります。
　きちんと、文書構造にしたがってマークアップするようにしましょう。デザインは後からついて来るモノです。

通報する

ＨＴＭＬが、
＿＿<div class="header">
＿＿＿＿<div class="nav">
＿＿＿＿＿＿<p>このページのインデックス</p>
＿＿＿＿＿＿<ol>
＿＿＿＿＿＿＿＿<li><a href="">ミツバチの種類</a></li>
＿＿＿＿＿＿＿＿<li><a href="">ミツバチの巣</a></li>
＿＿＿＿＿＿＿＿<li><a href="">ローヤルゼリーとは</a></li>
＿＿＿＿＿＿</ol>
＿＿＿＿</div>
＿＿</div>

だとすると、

div.header div.nav ol,div.header div.nav ol li{
＿＿display:block;list-style:none;
＿＿margin:0;padding:0;
＿＿line-height:40px;text-align:center;
}
div.header div.nav ol li{margin: 5px 10px;float:left;width:12em;}
div.header div.nav ol li a{
＿＿display:block;width:100%;height:100%;
＿＿text-decoration:none;position:relative;
＿＿border:solid 1px #57b4ff;
＿＿border-color: #57b4ff #0d78ff #0d78ff #57b4ff;
＿＿border-radius: 3px;
＿＿background: -moz-linear-gradient(white, silver);
＿＿box-shadow: 2px 2px 2px 0;
}
div.header div.nav ol li a:before,
div.header div.nav ol li a:after{
＿＿position:absolute;
}
div.header div.nav ol li a:before{content:"■";font-size:30px;left:0;}
div.header div.nav ol li a:after{content:"＞";right:0;}

とかかな？？？テストしてません。また、webkit系ブラウザへの対策はしてありません。

content:"■";
は、
content:url([画像ファイル]);
とするだけです。

★まず仕様書に目を通す癖をつけましょう。
生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

通報する