I have encountered a situation where I am unable to edit the HTML of a document, specifically a payment page on Shopify, for security reasons. Unfortunately, editing JavaScript is also restricted in this scenario.
However, there is a workaround available - you are able to modify your own css. Therefore, the solution must be CSS-based if possible.
The main objective is to replace text using CSS. While this task itself may not be directly achievable, I have found a way to achieve a similar result:
HTML
<P>This is some nice text here</p>
CSS
p:before{
content:'This text has replaced the original.';
visibility:visible;
}
p{
visibility:hidden;
}
JsFiddle - Codepen (for viewing in IE8/EI9)
This method works well for our current needs.
However, it should be noted that in IE8/IE9, the visibility property is not supported (Source)
I have experimented with other alternatives such as:
display:none;
and
opacity:0;
but both of these options hide the :before pseudo-element.
In addition, changing the text color to match the background color was considered, but we were not satisfied with the outcome due to potential issues with text highlighting.
Therefore, my query is: Are there any alternative methods to achieve this goal that are compatible with IE8/IE9?
Thank you.