web-dev-qa-db-fra.com

Mettez une icône après l'élément de liste avec: après et police génial

J'ai un problème pour que l'icône apparaisse directement après un élément de liste dans un ul en utilisant la police awesome et: after.

Le li avec la classe active devrait avoir l'icône après, mais quand un autre ul est ajouté avant de fermer l'élément de liste, il place l'icône après la liste secondaire entière.

<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>

Je ne peux pas pour la vie de moi comprendre ce que je fais mal.

Voici mon jsfiddle

Merci d'avance!!

cssfont-awesome
18
tyler_lisa

Comme je l'ai mentionné dans le commentaire:

"Lorsque vous ajoutez ce deuxième <ul> à l'intérieur du haut <li>, cette liste interne entière devient une partie de l'élément de liste parent. Il fait exactement ce que vous lui dites aussi, il place la flèche directement après le <li>. "

Si vous souhaitez que l'icône apparaisse après le texte indiquant "Plans de gestion intégrés des bassins versants côtiers", ajoutez un espace autour de ce titre et ajustez votre CSS pour ajouter le :after pseudo-élément de cette plage au lieu de l'ensemble <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;

}

Voici un violon mis à jour.

50
Jason