Balise qui supprime :after ?

Bonjour,

Je travaille actuellement sous le thème attitude (Theme) et j'essaye de faire un ribbon sur le menu (nav), pour cela j'utilise :before et :after donc pour before c'est ok j'arrive à avoir mon mon petit ribbon à gauche mais par contre l'élément after ne s'affiche pas, impossible de le voir.

Ma question est la suivante : es ce qu'une propriété css peut venir annuler l'effet after ?

J'ai ce code en ce qui concerne mon css :

#access{
	background-color: #3C5468;
	position: relative;
	margin-left: -15px;
	margin-right: -15px;
}

#access:before{
   display: block;
   width: 10px;
   height: 0px;
   position: absolute;
   bottom: -15px;
   left: -10px;
   content: "";
   border-bottom: 15px solid transparent;
   border-right: 15px solid rgb(27, 48, 65);
}

#access:after{
   display: block;
   top: 10px;
   right: -10px;
   position: absolute;
   content: "";
   width: 10px;
   height: 0px;
   border-bottom: 15px solid transparent;
   border-right: 15px solid rgb(27,48,65);
}

Voici le rendu :

http://image.noelshack.com/minis/2013/50/1386677558-capture.png

Auriez vous des pistes de réflexions ?

Merci et bonne journée
Modifié par John Wayne (10 Dec 2013 - 13:13)

En fait, ton code n'est pas mauvais, tu t'étais juste trompé sur la bordure droite (qui dans ce cas devient gauche) ainsi que pour la position top (que j'ai remplacé par bottom), bref, comme ca, ca marche:

http://jsfiddle.net/EhYuL/1/

Et logiquement une propriété css ne peut pas annuler l'effet :after (à moins que tu ais une même balise utilisant aussi :after et qui serait déclarée un peu plus loin dans ta feuille de style) mais vu que dans ce cas-ci tu cibles ta balise par un ID, je dirai à priori que non, toutefois pour l'affirmer il faudrait pouvoir voir l'entièreté de ton code.
Modifié par LuciferX (10 Dec 2013 - 14:09)

Salut

Merci pour ta solution cependant j'ai pensé à ce que tu as dis

a écrit :
Et logiquement une propriété css ne peut pas annuler l'effet :after (à moins que tu ais une même balise utilisant aussi :after et qui serait déclarée un peu plus loin dans ta feuille de style)

et j'ai recherché la balise :after et il y avait bien une balise qui venait écraser mon :after donc ça venait de là !

Merci pour ton aide

pas d'quoi, ravi d'avoir pu rendre service
Modifié par LuciferX (10 Dec 2013 - 15:53)