Styling diacritics without styling attached base characters

Anki Card Design
2

I tinkered around a bit, now it should work.

You had to go with the font-size of the diacritic over 20px, to change the color (don’t ask me why, I don’t know). It works now.

Put that in your HTML-Code:

ผล<span class="highlight">อ<span class="diacritic">&#x0E47</span>ย</span>

And put that into your styling:

.highlight
{
	color: blue;
}

.diacritic
{
	font-size: 22px;
	color: red;
}

It should look like that now:
solution1

4 Likes