Show website link on hover in social links block

src/components/Author/AuthorCard/AuthorCard.module.scss

@@ -144,6 +144,15 @@
       &::before {
         filter: invert(1);
       }
+
+      .authorSubscribeSocialLabel {
+        color: #000;
+        display: block;
+        @include font-size(1.6rem);
+        left: 100%;
+        padding-left: 0.4rem;
+        position: absolute;
+      }
     }
   }
 
@@ -151,18 +160,36 @@
     &::before {
       background-image: url(/icons/user-link-facebook.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='twitter.com/'] {
     &::before {
       background-image: url(/icons/user-link-twitter.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='telegram.com/'] {
     &::before {
       background-image: url(/icons/user-link-telegram.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='vk.cc/'],
@@ -170,77 +197,143 @@
     &::before {
       background-image: url(/icons/user-link-vk.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='tumblr.com/'] {
     &::before {
       background-image: url(/icons/user-link-tumblr.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='instagram.com/'] {
     &::before {
       background-image: url(/icons/user-link-instagram.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='behance.net/'] {
     &::before {
       background-image: url(/icons/user-link-behance.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='dribbble.com/'] {
     &::before {
       background-image: url(/icons/user-link-dribbble.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='github.com/'] {
     &::before {
       background-image: url(/icons/user-link-github.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='linkedin.com/'] {
     &::before {
       background-image: url(/icons/user-link-linkedin.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='medium.com/'] {
     &::before {
       background-image: url(/icons/user-link-medium.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='ok.ru/'] {
     &::before {
       background-image: url(/icons/user-link-ok.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='pinterest.com/'] {
     &::before {
       background-image: url(/icons/user-link-pinterest.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='reddit.com/'] {
     &::before {
       background-image: url(/icons/user-link-reddit.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='tiktok.com/'] {
     &::before {
       background-image: url(/icons/user-link-tiktok.svg);
     }
-  }
 
-  a[href*='vk.com/'] {
+    &:hover {
-    &::before {
+      .authorSubscribeSocialLabel {
-      background-image: url(/icons/user-link-vk.svg);
+        display: none;
+      }
     }
   }
 
@@ -249,12 +342,24 @@
     &::before {
       background-image: url(/icons/user-link-youtube.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='dzen.ru/'] {
     &::before {
       background-image: url(/icons/user-link-dzen.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   .button {
@@ -286,6 +391,10 @@
   }
 }
 
+.authorSubscribeSocialLabel {
+  display: none;
+}
+
 .authorSubscribeSocial {
   align-items: center;
   display: flex;

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -276,7 +276,13 @@ export const AuthorCard = (props: Props) => {
                 <div class={styles.authorSubscribe}>
                   <Show when={!props.noSocialButtons && !props.hideWriteButton && props.author.links}>
                     <div class={styles.authorSubscribeSocial}>
-                      <For each={props.author.links}>{(link) => <a href={link} />}</For>
+                      <For each={props.author.links}>
+                        {(link) => (
+                          <a href={link}>
+                            <span class={styles.authorSubscribeSocialLabel}>{link}</span>
+                          </a>
+                        )}
+                      </For>
                     </div>
                   </Show>
                   <Show when={!props.minimizeSubscribeButton}>