<nav id="social">
<a href="https://facebook.com"></a>
<a href="https://twitter.com"></a>
</nav>
html, body {
height: 100%;
}
body {
display: grid;
justify-items: center;
align-items: center;
}
a {
display: flex;
align-items: center;
color: #333;
font-size: 1.5em;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
[href]::before {
content: " ";
margin: 0 10px 0 0;
font-family: "Font Awesome 5 Brands";
font-weight: 400;
font-size: 1.2em;
}
[href*="facebook"]::before {
content: "\f09a";
}
[href*="twitter"]::before {
content: "\f081";
}
[href*="instagram"]::before {
content: "\f16d";
}
[target]::after {
content: "\f35d";
display: inline-block;
margin: 0 10px 0 0.75em;
color: #999;
font-family: "Font Awesome 5 Free";
font-weight: 400;
font-size: 0.6em;
}
const social = document.getElementById('social')
const facebook = social.firstElementChild
const href = facebook.getAttribute('href')
facebook.textContent = href
const twitter = facebook.nextElementSibling
twitter.textContent = twitter.href
This Pen doesn't use any external JavaScript resources.