Question

新手在这里。我正在尝试制作一组动画平面图标。想法是在悬停时缩小图标并同时扩展伪元素（:: after）。

但是，如本image.

所示，我的文字阴影在图标上溢出时遇到问题

这是我要实现的目标，但要使用文本阴影。 image

我尝试使用溢出：隐藏，但它也会使伪元素消失，如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);
}

Codepen：

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

问题：

伪元素是否有可能忽略/覆盖overflow属性？

或者我应该完全采用其他标记来实现我想要的设计。

感谢进阶：）

Answer 1

不幸的是，伪元素不能忽略其父对象的溢出属性。

解决该问题的一种好方法是为该属性创建一个Parent，该属性应位于元素之外（在您的情况下为Border），并为孩子提供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>

Codepen

Codepen

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

1 个答案: