JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
    <title>CSS</title>

    <article>The seller can, under Business Law <ref>1782</ref>, offer a full refund to buyers. </article>

CSS

body {
		font: 200%/1.45 charter;
	}
	ref::before {
		content: '\00A7';
		letter-spacing: .1em;
	}

JavaScript

function ruleSelector(selector) {
		function uni(selector) {
			return selector.replace(/::/g, ':')
		}
		return Array.prototype.filter.call(Array.prototype.concat.apply([], Array.prototype.map.call(document.styleSheets, function(x) {
			return Array.prototype.slice.call(x.cssRules);
		})), function(x) {
			return uni(x.selectorText) === uni(selector);
		});
	}

	var toggle = false, 
		pseudo = ruleSelector("ref::before").slice(-1);

	document.querySelector("article").onclick = function() {
		pseudo.forEach(function(rule) {
			if (toggle = !toggle)
				rule.style.color = "red";
			else
				rule.style.color = "black";
		});
	}