Puis-je utiliser plusieurs pseudo-sélecteurs de se concentrer avec avant/après sur le même élément?

J'essaie de combiner à l'aide de pseudo-sélecteurs de pseudo-éléments pour créer une info-bulle personnalisée.

Mon code HTML:

<input id='test'/>

Mon CSS:

#test {
    position: relative;
}

#test:focus {
    background-color: #08c;
}

#test:focus:before {
    position: absolute;
    left: 100%;
    width: 10px;
    height: 10px;
    background-color: black;
}

De violon à l'exécution du code: http://jsfiddle.net/9ujEH/

Actuellement l'entrée en bleu une fois porté comme une suite de #test:focus, mais le noir sqaure n'est pas ce que je pensais de #test:focus:avant.

OriginalL'auteur Wryte | 2013-03-15

  1. 3

    Pseudo-éléments ne peuvent être définis sur des éléments conteneurs. En raison de la façon dont ils sont rendus à l'intérieur du conteneur lui-même comme un élément du DOM. les intrants ne peut pas contenir d'autres éléments, d'où ils ne sont pas pris en charge. Un bouton sur l'autre côté, même si un élément de formulaire, les soutient parce que c'est un conteneur d'autres sous-éléments.

    De plus à partir de la 2.1 spec

    La ::after et ::before pseudo-éléments sont maintenant en utilisant le double deux-points pour éviter la confusion avec les pseudo-classes (qui, évidemment, utiliser :), bien que les anciennes version d'IE (7,8) ne reconnaît pas la double deux-points .. gardez cela à l'esprit si vous essayez de les soutenir.

    OriginalL'auteur Adrift

  2. 2

    :après & :avant ne fonctionne pas sur remplacé élément & input est un remplacé élément.

    Cochez cette http://reference.sitepoint.com/css/replacedelements

    OriginalL'auteur sandeep

  3. 1

    Cela ne fonctionne pas parce que input, comme img, les éléments sont nuls ou le remplacement des éléments, et n'ont pas de "contenu" à proprement parler, donc il n'y a pas de place pour les pseudo-éléments pour être inséré à l'intérieur des éléments.

    À l'aide d'un div, par exemple, vous peut utiliser plusieurs pseudo-sélecteurs, tels que:

    div:hover::before {
    /* CSS */
}

    JS Fiddle preuve-de-concept.

    Références:

    OriginalL'auteur David Thomas