Pseudo éléments ne présentant pas de

Éléments Pseudo ne s'affiche pas sur un div. Je suis à l'aide d'une image sprite mais j'ai essayé une non-image sprite ainsi, encore rien. J'ai essayé plusieurs stratégies, telles que le positionnement absolu, en utilisant le z-index, les marges, etc. J'ai l'impression de faire correctement si je ne me trompe pas ou apparemment, je suis en train de faire quelque chose de mal. Je suis nouveau sur la communauté et ont cherché ici et aussi sur Google mais sans résultat comme quoi il est pas à l'affiche.Le code ci-dessous dans les plus élémentaires de l'essayer. Merci à tous ceux qui prennent le temps d'aider.

.test {
    display:inline-block;
    background:#fff;
    width:60%;
}

.test:before,
.test:after {
     background:url("/imgs/Sprite2.png") repeat-y;
}

.test:before,
.test:after {
    position:relative;
    display:inline-block;
    vertical-align:top;
    width:27px;
    height:100%;
}

.test:before {
    content:"";
    background-position:0 0;
}

.test:after {
    content:"";
    background-position:-55px 0;
}

Je maintenant avoir de travail. Le code est ci-dessous. Je n'aurais juré que j'ai déjà essayé cela, mais je dois avoir fait quelque chose de mal la première fois que je l'ai fait.

 .test {
     background:#fff;
     width:60%;margin:0  0 60px 5%;
 }

 .test:before,
 .test:after {
     content:"";
     background:url("/imgs/Sprite2.png") repeat-y;
     position:absolute;
     top:0;
     width:27px;
     height:100%;
 }

 .test:before {
     right:100%;
     background-position:0 0;
 }

 .test:after {
     left:100%;
     background-position:-55px 0;
 }
Pourriez-vous poster une démo qui reproduit votre problème (et montre votre html), dans le JS Fiddle ou similaires?
Quel navigateur êtes-vous tester?
Je suis en essais sur tous les navigateurs actuels sur localhost l'installation. Tous mes css fonctionne toujours. J'ai juste commencé à essayer d'utiliser des Pseudo-éléments. pour supprimer vide s'étend pour des bords de l'image et nettoyeur markup/semantics.@David Thomas, je vais donner un coup de feu sur JS Fiddle maintenant.
Note rapide pour éviter que d'autres de faire la même erreur stupide que j'ai: si l'élément extérieur a overflow ensemble de hidden, le :after pseudo élément de ne pas s'afficher...

OriginalL'auteur Tony | 2012-09-24

  1. 7

    ÉDITÉ:

    C'est une question de height:100%; mentionné dans .test:before,.test:after

    Vous devez mentionner height:100% à .test et pour html et body aussi,

    Voir ci-dessous les modifications suggérées dans votre CSS:

    Essayez ceci:

    body, html { height: 100%; }

.test{ 
    display:inline-block; 
    background:#fff; 
    width:60%;
    height: 100%; /*added height*/
}

.test:before,
.test:after{
    content:"";
    background:url("/imgs/Sprite2.png") repeat-y;
    position:relative;
    display:inline-block;
    vertical-align:top;
    width:27px;
    height:100%;   
}

.test:before{ background-position:0 0 }
.test:after{ background-position:-55px 0 }

    Travail Démo

    :before et :after pseudo-éléments sont affichés comme inline éléments. Si vous avez besoin de spécifier display bien pour eux. Vous pouvez en lire plus ici: w3.org/TR/CSS2/generate.html#before-after-content
    Thomas et user1693535: mise à Jour de ma réponse avec une solution possible en fonction de mes pensées. J'ai peut-être tort.
    J'ai essayé en utilisant seulement display:block,mais toujours rien, j'ai aussi un peu modifié le code de la façon dont vous l'avez écrit A. K. Même résultat rien. Je suis en écoute ici.
    J'ai juste essayé ainsi A. K. je n'ai pas de corps, html fixé à hauteur de 100%, donc je l'ai fait, et j'ai ajouté le 100% de la hauteur de la div qui j'ai déjà essayé encore, encore nada.
    Thomas - Que voulez-vous dire?

    OriginalL'auteur Ahsan Khurshid

  2. 1

    Heres est la réponse corrigé, puisque je ne l'ai montré que j'y ai répondu en utilisant le bouton. J'ai juste placé en haut à penser qu'il serait considéré comme une réponse. En gros je doit avoir fait quelque chose de mal la première fois quelque part. Espérons que cela aide les gens qui ont eu des problèmes similaires à des mines.

    .test {
    background: #fff;
    width: 60%;
    margin: 0 0 60px 5%
}

.test:before, .test:after {
    content: "";
    background: url("/imgs/Sprite2.png") repeat-y;
    position: absolute;
    top: 0;
    width: 27px;
    height: 100%
}

.test:before {
    right: 100%;
    background-position: 0 0
}

.test:after {
    left: 100%;
    background-position: -55px 0
}

    OriginalL'auteur Tony

  3. 0

    Il semble que le problème a été votre css les propriétés non déclaré/organisé correctement. De ce que j'ai vu, vous avez déclaré le premier de votre background-image mais la contenu a été déclarée dernier avec l' background-position.

    Et j'ai eu mon propre problème sur Glyphicon police, qui n'apparaissait pas avant jusqu'à ce que j'ai mis ce que keaukraine avait mentionné sur la déclaration d' affichage propriété.

    Mais parfois, les gens ont tendance à oublier de déclarer la contenu de la propriété qui sera donné le résultat attendu à disparaître.

    De sorte qu'il devrait être arrangé quelque chose comme ceci:

    element:before {
  content: "\e013"; //or content: ""
  background:url("background_image.png");
  background-position: 0 0;
  display: inline-block;
}

    OriginalL'auteur Randy