CSS :: before :: after pseudo-élément de la classe ne fonctionne pas
Je suis en train d'ajouter un ::before
et ::after
pseudo-élément d'un menu d'en-tête. Les pseudo-éléments beau travail pour un lien régulier à l'extérieur du menu. Cependant, lorsque j'essaie de les appliquer à un élément de menu, le background
propriété est définie, mais la ::before
et ::after
propriétés ne sont pas.
Voici les CSS:
#cssmenu {
background-color: #FFFFCC;
clear: both;
display: inline;
float: left;
list-style: none;
overflow: hidden;
text-align: center;
text-transform: uppercase;
width: 100%;
}
#cssmenu li {
display: inline-block;
}
#cssmenu li a {
display: inline-block;
}
#cssmenu li ul {
/*margin-top: 0px; submenu location relative to bottom of parent */
display: none;
}
#cssmenu li:hover ul {
display: block;
position: absolute;
}
#cssmenu li ul li a {
width: 200px;
}
#cssmenu li:hover > a {
/* shadow around parent when hover */
box-shadow: 5px 5px 25px #000;
-moz-box-shadow: 5px 5px 25px #000;
-webkit-box-shadow: 5px 5px 25px #000;
}
#cssmenu li a {
color: #000;
font-weight: bold;
text-decoration: none;
padding: 0 12px;
line-height: 24px;
}
#cssmenu li a:hover {
background-color: #99CC99;
/*padding: 12px; link background when hover over link */
}
#cssmenu li ul {
background: rgba(255,255,255,0.9); child menu background w/ transparency
padding: 10px 5px;
box-shadow: 5px 5px 25px #BBB;
-moz-box-shadow: 5px 5px 25px #BBB;
-webkit-box-shadow: 5px 5px 25px #BBB;
border-radius: 0px 15px 15px 15px;
-moz-border-radius: 0px 15px 15px 15px;
-webkit-border-radius: 0px 5px 5px 5px;
}
/* display sub-menu as list */
#cssmenu li ul li {
display: block;
text-align: left;
}
#cssmenu li ul li a, #nav li ul li a:hover {
background: transparent;
color: #000;
width: 180px;
font-size: 0.95em;
font-weight: normal;
padding: 6px;
}
#cssmenu li ul li a:hover {
/*text-decoration: underline;*/
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
.menuheader {
/* allow for the pseudo-elements which do not have layout due to absolute positioning */
margin: 12px 15px;
border: 0;
background: url("../../../images/buttonslice24.png") 24px 0 repeat-x ;
}
.menuheader::before,
.menuheader::after {
content: ' ';
position: absolute;
top: 0;
width: 12px;
height: 24px;
}
.menuheader::before {
left: -12px;
background: url("../../../images/buttonleft24.png") 0 0;
no-repeat;
}
.menuheader::after {
right: -12px;
background: url("../../../images/buttonright24.png") 100% 0;
no-repeat;
}
Et le HTML:
<div id="cssmenu">
<ul>
<li><a class="menuheader" href="../../../contact-us.aspx">Contact</a></li>
<li><a class="menuheader" href="../../../">Home</a></li>
<li><a class="menuheader">Store</a>
<ul>
<li><a href="../../../shipping-policy.aspx">Shipping & Return Policy</a></li>
</ul>
</li>
<li><a class="menuheader" href="../../../account.aspx">Account</a></li>
<li><a class="menuheader" href="../../../cart.aspx">View Cart</a></li>
</ul>
</div>
J'ai aussi essayé de faire référence à la menuheader
classe les articles par #cssmenu ul li a
au lieu de cela, et qui fonctionne réellement (en quelque sorte). Au lieu de la ::before
et ::after
images montrant à côté de l'élément de menu lui-même, ils montrent à côté du premier élément dans le menu déroulant.
J'ai lu d'autres questions ici concernant les pseudo-éléments, ainsi que http://www.w3schools.com/css/css_pseudo_elements.asp et aussi loin que je peux dire, le ::before
et ::after
devrait pouvoir être appliqué à un <a>
élément. Cela peut être une simple question, mais je ne le vois juste pas la question ici.
source d'informationauteur dub stylee
Vous devez vous connecter pour publier un commentaire.
Si vous allez absolument position de la pseudo-éléments, vous avez besoin de donner à leurs parents un
position
valeur, de même qu'avec des pseudo-éléments.Juste ajouter:
Ici est une version mise à jour de votre JSFiddle (les seuls changements sont en ajoutant le code ci-dessus et de rendre l'arrière-plan de la pseudo-éléments d'une couleur unie pour la démonstration): http://jsfiddle.net/99Aq8/1/