Automatically add an arrow icon to every external link in your Webflow project

For the trick to work, you need to paste the custom CSS code from the embed field into your project.

The arrow icon can be replaced by your own SVG image in the CSS code.

After that, you may need to adjust the spacing and sizes in the CSS code.
If you use em for the sizes, the icon will automatically adjust when you use a larger font size.
<style>  .arrow-after:after {    display: inline-block;    content: '';    -webkit-mask-size: contain;    mask-size: contain;    background-color: currentColor;    -webkit-mask: url(https://uploads-ssl.webflow.com/60180dabe97688768823f75f/607565e1313a25574f28e4e4_arrow-right.svg) no-repeat 50% 50%;    mask: url(https://uploads-ssl.webflow.com/60180dabe97688768823f75f/607565e1313a25574f28e4e4_arrow-right.svg) no-repeat 50% 50%;    margin: 0.1em 0 0 0.3em;    width: 0.75em;    height: 0.68em;  }  a[target="_blank"]:after {      display: inline-block;    content: '';    -webkit-mask-size: contain;    mask-size: contain;    background-color: currentColor;    -webkit-mask: url(https://uploads-ssl.webflow.com/608fb40c3d9b077577fce197/60dd69136bc238e82174de73_external-link.svg) no-repeat 50% 50%;    mask: url(https://uploads-ssl.webflow.com/608fb40c3d9b077577fce197/60dd69136bc238e82174de73_external-link.svg) no-repeat 50% 50%;    margin: -0.3em -0.2em -0.25em 0.05em;    width: 1.1em;    height: 1.1em;  }</style>
Click to see more
text-style-link
Click to see more
text-style-link | arrow-after
Click to see more
text-style-link | [open in new tab is checked]
Click to see more
text-style-link | text size large | [open in new tab is checked]
Click to see more
text-style-link | text size large | [open in new tab is checked]