div { position: relative; width: 100px; height: 100px; background: #f00; }
div::before { position: absolute; content: ''; width: 75px; height: 75px; background: #0f0; }
div::before::before { position: absolute; content: ''; width: 50px; height: 50px; background: #00f; }
Is my syntax wrong or is pseudo-element within pseudo-element not supported?
Note that I am aware about the ::after
pseudo-element, though I need an actual element within another pseudo-element to achieve, e.g. where ::after
does not suffice is:
div { position: relative; width: 100px; height: 100px; background: #f00; }
div::before { position: absolute; content: ''; right: 0; bottom: 0; width: 75px; height: 75px; background: #0f0; }
div::after { position: absolute; content: ''; left: 0; top: 0; width: 50px; height: 50px; background: #00f; }
Because ::after
is relative to the element and not ::before
.
Is my syntax wrong or is pseudo-element within pseudo-element not supported?
If I understand you correctly, it isn't possible. You can't chain multiple pseudo-elements as of Selectors Level 3 though it apparently may be allowed in the future.
Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector. Note: A future version of this specification may allow multiple pseudo-elements per selector.
Interestingly, you can chain the ::first-letter
& ::before
/ ::after
pseudo-elements with the placeholder pseudo element, e.g.
::-webkit-input-placeholder::first-letter {
color: purple;
}
http://jsfiddle.net/k3yb6/1/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With