a[href^="http"] {
/* makes space for icon, so other content does not overlap */
padding-inline-end: 1rem;
}
a[href^="http"]::after {
content: "";
display: inline-block;
position: absolute;
width: 1.3rem;
height: 1.3rem;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M16%2016.667H8A.669.669%200%200%201%207.333%2016V8c0-.367.3-.667.667-.667h3.333c.367%200%20.667-.3.667-.666C12%206.3%2011.7%206%2011.333%206h-4C6.593%206%206%206.6%206%207.333v9.334C6%2017.4%206.6%2018%207.333%2018h9.334C17.4%2018%2018%2017.4%2018%2016.667v-4c0-.367-.3-.667-.667-.667-.366%200-.666.3-.666.667V16c0%20.367-.3.667-.667.667zm-2.667-10c0%20.366.3.666.667.666h1.727L9.64%2013.42a.664.664%200%201%200%20.94.94l6.087-6.087V10c0%20.367.3.667.666.667.367%200%20.667-.3.667-.667V6h-4c-.367%200-.667.3-.667.667z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
background-size: 100%;
translate: -0.1rem 0.15rem;
}
/* other styles */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
height: 100dvh;
margin: 0;
display: grid;
place-items: center;
/* if browsers have different font size line height, it can throw off alignment of icon */
font-size: 16px;
line-height: 1.5;
font-family: Arial, Helvetica, sans-serif;
}
p {
max-width: 300px;
margin-block-end: 1rem;
}
a {
color: inherit;
}