Как лучше всего заменить текст с помощью CSS только с ограниченными параметрами ⇐ CSS

[Anonymous]

У меня есть неизменяемый HTML-код:
Original Headline
И мне нужно написать CSS только для замены текста h1, используя методы безопасного внедрения.
Вот правила:
- вам не разрешено изменять размер шрифта, поскольку мы не будем знать, на что его установить обратно
- JS не разрешен
- вы не можете изменить HTML
/>Контекст:
- это для A/B-тестирования
- правила необходимы по разным причинам, например, необходимость рендеринга перед телом и т. д. (я не буду вдаваться в подробности)
- мы не будем знать размер шрифта, поскольку кто-то может ввести свой собственный сайт в наш инструмент, а определение размера шрифта создает сложности в других местах.
Мой вопрос: это: Какой безопасный CSS можно написать, который сможет просто заменить только текст тега h1?
Мне удалось добиться успеха, только изменив размер шрифта. Изменение видимости, по-видимому, не сработает, поскольку исходный текст технически все еще присутствует, а использование псевдоэлемента просто сдвигает его в другую позицию, что может нарушить поток страниц.
JSFiddle: https://jsfiddle.net/wLg6ejf2/
Попытки CSS:
/* works but fails, because we won't know the font size */
/* h1 {
font-size: 0 !important;
}
h1::before {
content: 'New Headline' !important;
font-size: 25px !important;
} */

/* not a nice solution, since the text is still present and could shift other content and disrupt page flow */
h1 {
visibility: hidden;
}
h1::before {
content: 'New Headline';
visibility: visible;
}



Подробнее здесь: https://stackoverflow.com/questions/798 ... ed-options