¿Puedo orientar a: antes o después del pseudo-elemento con un combinador de hermanos?

¿Hay alguna razón por la cual este CSS no funciona?

http://jsfiddle.net/6v5BZ/

a[href^="http"]:after { content:""; width:10px; height:10px; display:inline-block; background-color:red; } a[href^="http"] img ~ :after { display:none; } 

.. en este HTML?

 Test    

La idea es tener un pseudo-elemento en la coincidencia de tags de anclaje. Pero no quiero que se aplique a las tags de anclaje que envuelven una imagen. Y como no puedo apuntar a los delimitadores usando algo así como a < img , pensé que tal vez podría apuntar al pseudo-elemento después de encontrar una imagen de la que es un hermano.

Cualquier idea sería muy apreciada.

No se puede segmentar: después, dado que su contenido no se representa en el DOM y no lo manipula; para que esto funcione, el DOM debería volver a procesarse y CSS no puede manipularlo de esta manera.

Verifique la especificación para una comprensión detallada: http://www.w3.org/TR/CSS2/generate.html#propdef-content

El contenido generado no altera el árbol del documento. En particular, no se retroalimenta al procesador de lenguaje de documentos (por ejemplo, para reparsing).

Le sugiero que use JavaScript para hacer el trabajo por usted.

No puede usar un combinador para dirigir un pseudo-elemento relativo a elementos distintos a su elemento generador.

Esto se debe a que son pseudo-elementos , no elementos reales, y los combinadores solo funcionan estableciendo relaciones entre elementos reales. Un pseudo-elemento, por otro lado, solo se puede aplicar al sujeto de un selector (el selector compuesto situado más a la derecha), y esto ocurre solo después de que la coincidencia se procesa en los elementos reales. En otras palabras, la coincidencia se realiza primero como si el pseudo-elemento no estuviera allí, luego el pseudo-elemento, si está indicado dentro del selector, se aplica a cada coincidencia.

En tu código, el siguiente selector:

 a[href^="http"] img ~ :after 

En realidad, no busca un :after pseudo-elemento que viene después de una img dentro de la a , a pesar de que aparece de esa manera ya que ambos se representan como elementos secundarios del elemento a.

Se puede reescribir en lo siguiente:

 a[href^="http"] img ~ *:after 

Observe el * selector, que está implícito. De forma similar a cómo se puede omitir * antes de cualquier otro selector simple para que esté implícito, omitir * de un pseudo-elemento también implica que está ahí. Ver la especificación para más detalles.

Ahora, a pesar de que aparece *:after aún debe coincidir con a:after (dado que a correspondería con * ), aún así no funciona de esa manera. Si elimina el :after pseudo-elemento del selector:

 a[href^="http"] img ~ * 

Notarás que el significado del selector cambia por completo:

Seleccione cualquier elemento
que aparece como un hermano siguiente de un img
que es un descendiente de un a (cuyo href comienza con “http”).

Dado que img es el último elemento secundario del elemento a en su HTML, no hay hermanos a los que corresponder, y por lo tanto no :after de que se puedan generar los pseudo-elementos.

En el caso de :before o :after pseudo-elemento, se podría pensar en hacer coincidir el elemento generador del pseudo-elemento con el “hermano” del pseudo-elemento, pero como el OP ha señalado correctamente, no hay un selector principal , así que tampoco tienen suerte allí.