Tag: PSEUDO-ELEMENT
Tengo un código como este: .arrow { cursor: pointer; user-select: none; display: flex; justify-content: center; align-items: center; margin-left: 1em; transition: background-color .1s ease; z-index: 1; &:hover { background-color: ${backgroundColors.green3}; &:after { background: url(${arrowPointToRightSvg}); z-index: 2; position: relative; } } } .arrow > .arrow:after { position: relative; display: block; content: ‘ ‘; . . . Read more
Considere: @mixin pseudo-element-background { content: “”; background-size: cover; background-position: top; // background-attachment: fixed; // distorts the image position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; } div { position: relative; width: 20rem; max-height: 10rem; overflow-y: auto; &::before { background-image: url(http://www.freegreatpicture.com/files/147/18380-hd-color-background-wallpaper.jpg); @include pseudo-element-background; } } <div> <h1>Text1</h1> . . . Read more
Cuando el pseudo-elemento tr::after tiene position: relative, y el elemento principal tr tiene position: absolute, ese pseudo-elemento se posiciona incorrectamente en Safari. ¿Tiene alguna sugerencia sobre cómo hacerlo funcionar en Safari? tr { position: relative; } tr::after { position: absolute; right: 0; bottom: 0; left: 0; margin: 0 5px; border-bottom: . . . Read more
En el siguiente código, el contenido dentro del elemento debería aumentar de tamaño al pasar el mouse por encima (escalado verticalmente alineado verticalmente), pero el seudoelemento de posición absoluta adjunto (*) debería mantenerse exactamente en el mismo lugar sin ningún escalado. En mi código, lamentablemente el símbolo * se está . . . Read more
No estoy seguro de que sea posible solamente con CSS, ¿el contenido de un selector pseudo puede contener una expresión regular? En este escenario: .normal-class::before { /* content: attr(class); => esto funciona, pero devuelve ambas clases */ } /* NO FUNCIONA .normal-class::before { content: attr(class[^=special]); }*/ /* NO FUNCIONA .normal-class::before . . . Read more