html
css
Link
to demo
<p>No attribute</p> <p data-content="">data-content</p> <p data-content="hello">data-content="hello"</p> <p data-content="hello world">data-content="hello world"</p> <p data-content="hello-helloween">data-content="hello-helloween"</p> <p data-content="i say hello">data-content="i say hello"</p>
BODY { padding-top: 10px; text-align: center; } P { display: inline-block; width: 40%; margin: 2%; padding: 7px; box-sizing: border-box; border: 2px solid #CCC; border-radius: 10px; } P[data-content^="hello"] { border: 2px solid tomato; }