JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <code>Testing the pipe (|) selector.</code>
</p>
<ul id="pipe">
    <li title="test">testing attribute selectors</li>
    <li title="testing">testing attribute selectors</li>
    <li title="testing test">testing attribute selectors</li>
    <li title="testing-test">testing attribute selectors</li>
    <li title="test-testing">testing attribute selectors</li>
</ul>

<hr>

<p>
    <code>Testing the caret (^) selector.</code>
</p>
<ul id="caret">
    <li title="test">testing attribute selectors</li>
    <li title="testing">testing attribute selectors</li>
    <li title="testing test">testing attribute selectors</li>
    <li title="testing-test">testing attribute selectors</li>
    <li title="test-testing">testing attribute selectors</li>
</ul>

CSS

#pipe > li[title|="testing"] { background-color: aqua; }

#caret > li[title^="testing"] { background-color: pink; }