<div class="container">
  <a href="https://www.juangarcia.design" target="_blank" rel="noopener noreferrer">
    My personal website
    <span class="visually-hidden">This link opens in a new tab</span>
    <img alt="New Window Icon. This icon indicates that the link will open in a new tab" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDI5IDI5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjsiPgogICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwtMiwtMS45NzUpIj4KICAgICAgICA8Zz4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjUuOCwzMEwyLjgsMzBDMi4zLDMwIDIsMjkuNyAyLDI5LjNMMiw2LjNDMiw1LjkgMi4zLDUuNSAyLjgsNS41TDE2LDUuNUMxNi40LDUuNSAxNi43LDUuOCAxNi43LDYuM0MxNi43LDYuOCAxNi40LDcgMTYsN0wzLjUsN0wzLjUsMjguNUwyNSwyOC41TDI1LDE2QzI1LDE1LjYgMjUuMywxNS4yIDI1LjgsMTUuMkMyNi4zLDE1LjIgMjYuNiwxNS41IDI2LjYsMTZMMjYuNiwyOS4zQzI2LjUsMjkuNyAyNi4yLDMwIDI1LjgsMzBaIiBzdHlsZT0iZmlsbDpyZ2IoMzUsMzEsMzIpO2ZpbGwtcnVsZTpub256ZXJvOyIvPgogICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTExLjksMjAuOUMxMS43LDIwLjkgMTEuNSwyMC44IDExLjQsMjAuN0MxMS4xLDIwLjQgMTEuMSwxOS45IDExLjQsMTkuNkwyOC43LDIuMkMyOSwxLjkgMjkuNSwxLjkgMjkuOCwyLjJDMzAuMSwyLjUgMzAuMSwzIDI5LjgsMy4zTDEyLjQsMjAuNkMxMi4zLDIwLjggMTIuMSwyMC45IDExLjksMjAuOVoiIHN0eWxlPSJmaWxsOnJnYigzNSwzMSwzMik7ZmlsbC1ydWxlOm5vbnplcm87Ii8+CiAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjkuMSwxMS43QzI5LDExLjcgMjksMTEuNyAyOS4xLDExLjdDMjguNywxMS43IDI4LjMsMTEuMyAyOC4zLDEwLjlMMjguNSwzLjRMMjEsMy43QzIwLjYsMy43IDIwLjIsMy40IDIwLjIsM0MyMC4yLDIuNiAyMC41LDIuMiAyMC45LDIuMkwyOS4yLDJDMjkuNCwyIDI5LjYsMi4xIDI5LjcsMi4yQzI5LjgsMi4zIDMwLDIuNiAzMCwyLjhMMjkuOCwxMUMyOS44LDExLjQgMjkuNSwxMS43IDI5LjEsMTEuN1oiIHN0eWxlPSJmaWxsOnJnYigzNSwzMSwzMik7ZmlsbC1ydWxlOm5vbnplcm87Ii8+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=" />
  </a>
</div>
/* Container Styling. Unrelated to the new tab link functionality */
body {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.container a {
  text-decoration: none;
  font-weight: 300;
  color: #222;
  position: relative;
  display: grid;
  grid-template-columns: 150px 16px;
  grid-gap: .25rem;
}

.container a img {
  max-width: 16px;
  position: relative;
  top: 1px;
}

/* Visually hide the text by default. ⚠️ WARNING! Don't use display:none, otherwise screen readers won't pick it up. */
a span.visually-hidden {
  height: 1px;
  left: -999px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
  /*  Styles for the popover  */
  background: #AAA;
  padding: .2rem;
  border-radius: .25rem;
  font-size: .75rem;
}

/* Show the indicator when the icon is hovered, focused, or active */
a:hover span.visually-hidden, a:focus span.visually-hidden, a:active span.visually-hidden {
  height: inherit;
  width: 100%;
  left: inherit;
  top: .25rem;
  box-sizing: border-box;
  grid-row: 2;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.