How to hyperlink the replaced "Made with Streamlit" text

[bismo]

After reading some recent threads, I was able to find some code that overrides the “Made with Streamlit” text at the bottom of the page using the following code:

    <style>
    footer {visibility: hidden;}
    
    footer:hover,  footer:active {
        color: #ffffff;
        background-color: transparent;
        text-decoration: underline;
        transition: 400ms ease 0s;
    }

    footer:after {
        content:'bar'; 
        visibility: visible;
        display: block;
        position: relative;
        padding: 5px;
        top: 2px;
    }
    </style>

I’d like to add a hyperlink to bar just like the original footer. I thought adding an href would do the trick, but the following code

footer = """
    <style>
    footer {visibility: hidden;}
    
    footer:hover,  footer:active {
        color: #ffffff;
        background-color: transparent;
        text-decoration: underline;
        transition: 400ms ease 0s;
    }

    footer:after {
        content:'bar'; 
        visibility: visible;
        display: block;
        position: relative;
        padding: 5px;
        top: 2px;
    }
    </style>
    <a href='https://www.streamlit.io' class='footer'>foo</a>
    """
st.markdown(footer, unsafe_allow_html=True)

Produces the following output in my app

Does anyone know how/if there is any css/html wizardry that can hyperlink the content text that overrides the default text?