JSFiddle - React, Tailwind, and code Playground

by Naeel Maqsudov

HTML

псевдо(классы/элементы)
<p class="c1">11111</p>
<p>22222</p>
<p>33333</p>
<p class="c1">44444</p>
<p>55555</p>
<p class="c1">66666</p>
<p>77777</p>
<p>88888</p>
<p>99999</p>
<p>00000</p>

CSS

.c1{color:red}
.c1:first-letter{color:green}
.c1:hover::first-letter{border:1px solid blue}
p:not(.c1){color:blue}
p:not(.c1)::after{content:"?"}
p:not(.c1):hover::after{border:3px solid #A3F}
.c1::first-letter:hover{border:3px solid #000 /*не работает*/}
.c1::first-letter::before{content:"XXX"  /*не работает*/}