web-dev-qa-db-ja.com

リスト項目の後に：afterとfont awesomeを使用してアイコンを配置します

フォントawesomeと：afterを使用して、ulのリスト項目の直後にアイコンを表示するのに問題があります。

アクティブクラスのliの後にアイコンが必要ですが、リストアイテムを閉じる前に別のulが追加されると、セカンダリリスト全体の後にアイコンが配置されます。

<div id="thirdLevMenu">
<ul>
<li class="active">Integrated Coastal Watershed Management Plans
<ul>
<li><a href="http://design-irwmp3.migcom.com/app_pages/view/7931">Russian River Integrated Coastal Watershed Management Plan</a></li>
<li><a href="http://design-irwmp3.migcom.com/app_pages/edit/http:/www.goldridgercd.com/watersheds/salmoncreekplan.html" target="_blank">Salmon Creek Coastal Watershed Management Plan</a></li>
<li><a href="http://design-irwmp3.migcom.com/app_pages/edit/http:/www.mattole.org/plan" target="_blank">Mattole Coastal Watershed Management Plan</a></li>
<li><a href="http://design-irwmp3.migcom.com/app_pages/edit/http:/www.trinidad.ca.gov/documents-library/category/30-icwmp.html" target="_blank">Trinidad-Westhaven Coastal Watershed Management Plan</a></li>
</ul>
</li>
</ul>
</div>

私の人生では、私が間違っていることを理解することはできません。

これは私のjsfiddleです

前もって感謝します！！

cssfont-awesome
18
tyler_lisa

コメントで述べたように：

「その2番目の<ul>をトップ<li>内に追加すると、その内部リスト全体が親リストアイテムの一部になります。それはまさにあなたが伝えていることとまったく同じです。 <li>。」

代わりに「Integrated Coastal Watershed Management Plans」というテキストの後にアイコンを配置したい場合は、そのタイトルの周りにスパンを追加し、CSSを微調整して、:after全体ではなく<li>擬似要素を追加します] _。

HTML

<li class="active">
 <span class = "title">Integrated Coastal Watershed Management Plans</span>

 ...
</li>

CSS

#thirdLevMenu ul li.active .title:after{ 
   content: '\f0da';
   font-family: FontAwesome;
   font-weight: normal;
   font-style: normal;
   margin:0px 0px 0px 10px;
   text-decoration:none;

}

これが更新されたフィドルです。

50
Jason