CODEWITHSUNDEEP
csspseudo-element
Navin Rauniyar
Navin Rauniyar

Reputation: 10525

Why can't I use pseudo element in pseudo element?

We can use pseudo element like this:

div:before{
    content: "pseudo!";
    position: absolute;
    right: 200px;
}

But again for that pseudo element, I wanted to decorate the first-letter like this:

div:before:first-letter{
    font-size: 26px;
    color: red;
}

But which won't work anymore. Why?

Upvotes: 2

Views: 139

Answers (2)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

From the doc:

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content.

But if you need exactly like that, you can use two pseudo elements separately like below:

div:before{
    content: "p";
    position: absolute;
    right: 240px;
    top: 0;
    font-size: 26px;
    color: red;
}
div:after{
    content: "seudo!";
    position: absolute;
    right: 200px;
}

demo

Upvotes: 1

Blender
Blender

Reputation: 298046

Because the spec only allows one pseudo-element per selector:

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.

Upvotes: 3

Related Questions