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

Question

我正在尝试制作一组​​动画平面图标。想法是在悬停时缩小图标并同时展开伪元素 (::after)。

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

这就是我想要实现的，但使用了文本阴影。 image

我尝试使用 overflow:hidden 但它也会使伪元素消失，如 here. 所示

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

代码笔:

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

问题:

伪元素是否可以忽略/覆盖溢出属性？

或者我应该做一个完全不同的标记来实现我想要的设计吗？

Answer 1

不幸的是，伪元素无法忽略其父元素的溢出属性。

绕过它的一个好方法是为应该在元素外部的属性(在您的例子中是 Border)创建一个 Parent 并给 child 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>