CODEWITHSUNDEEP
css
antonlab
antonlab

Reputation: 343

Possible to use :before pseudo-selector on itself?

For example, something like:

HTML

<p>text</p>

CSS

p:before {
content: " 1";
}

p:before:before {
content: " 2";
}

Which would end up with something like this:

text 1 2

If this isn't possible, is there any way to emulate the same effect?

In my project I have the original text content hidden with font-size:0 and added coloured text in it's place with the :before pseudo-selector.

However, it's 2 words, so I'd like to be able to add more content AFTER the generated content to change the colour.

enter image description here

The "GLB Guide" is generated using :before, but I'd like to be able to make both words different colours.

Hope that made sense!

Upvotes: 0

Views: 49

Answers (1)

ketan
ketan

Reputation: 19341

You want something like following which make you text with two different color:

p:before {
content: " GLB";
color: red;
}

p:after {
content: " Guide";
color: blue;
}
<p></p>

Upvotes: 3

Related Questions