Css 伪元素忽略/覆盖溢出隐藏属性

我正在尝试制作一组动画平面图标。其想法是缩小悬停时的图标，同时展开伪元素（

：：after

）

但是，我在图标上溢出的文本阴影上遇到了问题，如图所示

这就是我试图实现的，但是使用文本阴影

我尝试使用

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);
}

。社交图标LIA{
位置：相对位置；
文本阴影：28px28px0pxrgb（212,0,32）；
/*溢出：隐藏；不幸的是，伪元素不能忽略其父元素的溢出属性

绕过它的一个好方法是为属性创建一个父属性，该属性应该位于元素之外（在您的例子中是边界），并为子属性提供
溢出：隐藏

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>




嘿！谢谢你的回答，也谢谢你提供了一个解决办法。这正是我需要的。非常感谢！