Articles of pseudo elemento

Selector universal * y pseudo elementos

¿El selector universal * afecta a pseudo elementos como :before y :after ? Dejame usar un ejemplo: Al hacer esto: * { box-sizing: border-box; } … ¿la statement anterior no incluye / afecta automáticamente a los pseudo elementos como :before y :after también? O bien, para afectar a los pseudo elementos como :before y :after […]

Índice Z con pseudo-elemento anterior

Creé un elemento ‘header’ con un elemento before-pseudo. el elemento pseudeo debe estar detrás del elemento padre. Todo funciona bien hasta el momento en que doy mi ‘encabezado’ un índice Z. Lo que quiero: el “encabezado” amarillo en el primer plano, el pseudo-elemento rojo en el fondo y un simple z-index de 30 en el […]

¿Los pseudo elementos CSS3 :: antes y :: después son compatibles con IE9 o no?

En esta tabla de compatibilidad de MS , dice, IE9 no admite pseudo-elements ::before y ::after , pero cuando lo bash parece que sí … see JSBin ¿Estoy haciendo algo mal? Pensé ::before y ::after serían buenas herramientas para ocultar cosas de IE9, cuando de hecho, no lo hacen.

¿Debo usar un solo punto y coma (:) o dos puntos dobles (:) para antes, después, primera letra y pseudo-elementos de primera línea?

De MDN: La notación :: se introdujo en CSS 3 para establecer una discriminación entre pseudo-clases y pseudo-elementos. Los navegadores también aceptan la notación : presentada en CSS 2. Si la notación : siempre será aceptada por los navegadores CSS3, ¿debería usarla porque funciona en navegadores antiguos y nuevos? ¿O debería usar ambos, para los […]

Nido de pseudo-elementos dentro de pseudo-elementos

Tengo un: antes para una ‘cita’ de apertura y una: después para una cita de cierre. Ahora lo que quiero es un: after: after para la referencia ‘cite’ pero no puedo hacer que funcione. ¿Alguien sabe si esto es posible? Mi código hasta el momento: – blockquote:before { content: ‘\201C’; } blockquote:after { content: ‘\201D’; […]

¿Cómo puedo hacer que el contenido generado sea seleccionable?

Puedo hacer que CSS muestre la ID de un elemento utilizando contenido generado, como este: h2:hover:after { color: grey; content: “#” attr(id); float: right; font-size: smaller; font-weight: normal; } My ID Pellentesque habitant morbi tristique senectus et netus et. ¿Cómo puedo seleccionar el contenido generado (“# my-id”) para que el usuario pueda resaltarlo y copiarlo?

:: antes del problema de orden de astackmiento de pseudo-elemento

Cuando está posicionado estáticamente, el :: pseudo elemento antes se acumula (índice Z) antes del contenido del niño, pero después del fondo del niño. ¿Alguien puede explicar por qué o incluso cómo está sucediendo esto o si este es un problema que tienen todos los navegadores principales? div { background-color:yellow; width:400px; } div::before { background-color:red; […]

“Text-decoration” y el pseudo-elemento “: after”, revisitado

Estoy volviendo a hacer esta pregunta porque sus respuestas no funcionaron en mi caso. En mi hoja de estilo para medios impresos, deseo adjuntar la url después de cada enlace usando la pseudoclase :after . a:after { content: ” “; text-decoration: none; color: #000000; } En Firefox (y probablemente Chrome pero no en IE8), text-decoration: […]

¿Puedo tener múltiples: antes de los pseudo-elementos para el mismo elemento?

¿Es posible tener múltiples :before pseudos para el mismo elemento? .circle:before { content: “\25CF”; font-size: 19px; } .now:before{ content: “Now”; font-size: 19px; color: black; } Estoy intentando aplicar los estilos anteriores al mismo elemento usando jQuery, pero solo se aplica el más reciente, nunca los dos.

¿Puedo cambiar el alto de una imagen en CSS: antes / después de los pseudo-elementos?

Supongamos que quiero decorar enlaces a ciertos tipos de archivos usando una imagen. Podría declarar mis enlaces como A File! luego tener CSS como .pdflink:after { content: url(‘/images/pdf.png’) } Ahora, esto funciona muy bien, excepto si pdf.png no es el tamaño correcto para mi texto de enlace. Me gustaría poder decirle al navegador que escale […]