JSFiddle - React, Tailwind, and code Playground

HTML

<span class="text1" data-text1="Hello" data-text2="Bye"></span>
<br>
<span class="text2" data-text1="Hello" data-text2="Bye"></span>
<br>
<span class="text1 text2" data-text1="Hello" data-text2="Bye"></span>
<br>
<span data-text1="Hello"></span>
<br>
<span data-text2="Bye"></span>

CSS

span.text1:before {
  content: attr(data-text1);
}

span.text2:before {
  content: attr(data-text2);
}

.text1.text2:before {
  content: attr(data-text1) " and " attr(data-text2);
}

[data-text1]:before {
  content: attr(data-text1);
}

[data-text2]:before {
  content: attr(data-text2);
}