Change href of anchor tag through html/css

Question

I have a webpage(say http://www.example1.com ) which contains an anchor tag that points to a different website(say http://www.example2.com ). I have to test it on testing servers (for which the urls are www.example1-test.com and example2-test.com) before publishing it. When the code is on example1-test.com then the link should point to example2-test.com and when it is on example1.com then it should point to example2.com.

But I cannot use JavaScript or manually change code while switching the servers. I can only use html and css. Is there a way to do this?

I know this is a weird question and css is used for styling and not to write logic but I cannot use JavaScript for this unless there is a way to enable JavaScript in the browser through some html tags.(say some meta tags,etc.)

I can put in two separate link pointing to respective example1.com and example2.com and do a show/hide depending on the environment but then the question is where do I put these conditions (cannot use JavaScript).

Answer 1

For testing I used to change my hosts file and redirect live domains to my test IPs on the internal network. I follow links and my browser thinks I'm hitting example2.com but actually my hosts file is pointing to the IP of example2-test.com and I see new functionality. When both go live I know visitors experience exactly what I've just tested but using live DNS.

Nowadays URLs in my applications are generated using routes and environments. I can specifically tell my framework that in development environments I expect URLs to be generated with XYZ base but behave differently in production.

Another option is Greasemonkey scripts . It is a browser plugin which executes scripts on command to manipulate pages, navigate, automate and more.

I can't think of a client-side way to achieve what you're looking for without the use of Javascript or browser plugins.