JSFiddle - React, Tailwind, and code Playground

by Galled

HTML

<p class="normal">Hello Normal
    <span>a</span>
    <span>a</span>
    <span>a</span>
    How are you?
    </p>
    <p class="moz">Hello Mozilla
    <br/>
    <br/>
    <br/>
    How are you?
    </p>
    <p class="webkit">Hello Webkit
    <br/>
    <br/>
    <br/>
    How are you?
    </p>

CSS

p.normal::selection {
    background:#cc0000;
    color:#ff0;
}
p.normal span::selection {
    /*background:#cc00ff;
    color:#ff0;*/
    background:white;
    color:#ff0;
}
p.normal{
    border: 1px solid violet;
}
p.normal span:before{
    content:'a';
}
p.normal span {
    width:0;
    margin-left:100%;
    /*margin-top:1em;*/
    clear:left;
    display: block;
    height: 1em;
    /*height: 0;*/
    text-indent:-99999px;
}

p.moz::-moz-selection {
    background:#cc0000;
    color:#ff0;
}

p.webkit::-webkit-selection {
    background:#cc0000;
    color:#ff0;
}