Блог

Я пытаюсь создать набор анимированных плоских значков. Идея состояла в том, чтобы одновременно уменьшать значок при наведении курсора мыши и расширять псевдоэлемент ( ::after ).

Однако у меня возникла проблема с переполнением текстовой тени на значке, как видно на этом изображении.

Это то, чего я пытаюсь достичь, но с помощью text-shadow. изображение

Я пытался использовать, overflow:hidden но это также приводит к исчезновению псевдоэлемента, как показано здесь.

CSS:

 .social-icons li a {
  position: relative;
  text-shadow: 28px 28px 0px rgb(212, 0, 32);
  /* overflow: hidden; <---------- */
}

.social-icons li a::after {
  content: "";
  position: absolute;
}

.social-icons li a:hover {
  transform: scale(0.8);
}

.social-icons li a:hover::after {
  transform: scale(1.1);
}
  

Codepen:

https://codepen.io/karl-yagin/pen/KEWJRV

Вопрос:

Возможно ли, чтобы псевдоэлемент игнорировал / переопределял свойство overflow?

Или мне следует сделать совсем другую разметку, чтобы добиться желаемого дизайна?

К сожалению, псевдоэлементы не могут игнорировать свойство overflow своих родителей.

Хороший способ обойти это — создать родительский элемент для свойства, которое должно находиться за пределами элемента (в вашем случае Границы), и предоставить дочернему элементу overflow:hidden

CSS

 .social-icons li a {
  overflow: hidden;
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #fa0546;
  box-shadow: 0 2px 16px rgba(250, 5, 70, 0.5);
  font-size: 33px;
  line-height: 70px;
  color: #eaeaea;
  transition: all 0.3s ease;
    text-shadow:0px 0px 0px rgb(213, 0, 33) ,
    1px 1px 0px rgb(215, 0, 35) ,
    2px 2px 0px rgb(216, 0, 36) ,
    3px 3px 0px rgb(218, 0, 38) ,
    4px 4px 0px rgb(219, 0, 39) ,
    5px 5px 0px rgb(221, 0, 41) ,
    6px 6px 0px rgb(222, 0, 42) ,
    7px 7px 0px rgb(224, 0, 44) ,
    8px 8px 0px rgb(225, 0, 45) ,
    9px 9px 0px rgb(227, 0, 47) ,
    10px 10px 0px rgb(228, 0, 48) ,
    11px 11px 0px rgb(230, 0, 50) ,
    12px 12px 0px rgb(232, 0, 52) ,
    13px 13px 0px rgb(233, 0, 53) ,
    14px 14px 0px rgb(235, 0, 55) ,
    15px 15px 0px rgb(236, 0, 56) ,
    16px 16px 0px rgb(238, 0, 58) ,
    17px 17px 0px rgb(239, 0, 59) ,
    18px 18px 0px rgb(241, 0, 61) ,
    19px 19px 0px rgb(242, 0, 62) ,
    20px 20px 0px rgb(244, 0, 64) ,
    21px 21px 0px rgb(245, 0, 65) ,
    22px 22px 0px rgb(247, 2, 67) ,
    23px 23px 0px rgb(248, 3, 68) ,
    24px 24px 0px rgb(250, 5, 70);
}

.border {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 5px solid rgb(227, 0, 47);
  transition: all 0.3s ease;
  overflow: hidden;
}

.border:hover a {
  transform: scale(0.8);
}

.border:hover {
  transform: scale(1.1);
}
  

HTML

   <ul class="social-icons">
    <li>
      <div class="border">
        <a href="#" target="_blank" class="fab fa-facebook-f"></a>
      </div>
    </li>