Replace text with CSS – Part 2
Yesterday I explored a potential solution to replace text with CSS. One of the drawbacks is that it only works if the text to be replaced is at the end of the line. I set out to remove this limitation, and the fix is relatively obvious: use another pair of classes, with the first class to be used with the ::after pseudoelement.
HTML content:
<h2 class="text-replace">
<span class="before-text-data">Some </span>
<span class="text-data">data</span> and more</span>
</h2>
CSS content:
.text-replace span.text-data {
display: none;
}
.text-replace span.before-text-data::after {
content: "d|2a|1t|3a|2";
}