Text link hover underline with arrow appear

I'm looking to make my text links (not in the main nav) underlined with an arrow that pops out on hover, like what Squarespace does on its homepage. See attached for the section.

site: https://toucan-tetra-fwm2.squarespace.com/

p: argus

For example Learn more link, you can remove your arrow then use this CSS code

div.desc-wrapper a {
    background: url("https://static1.squarespace.com/static/65142cdeff10b41888f5d1e4/t/651c8e086f6d0f7a06935442/1696370184157/right-arrow_2.png") !important;
    background-repeat: no-repeat !important;
    background-size: 0px !important;
    background-position: right !important;
    padding-right: 30px;
}
div.desc-wrapper a:hover {
    background-size: 30px !important;
}

You can do through default css styles.