Pseudo element ignore/override overflow hidden property

Question

I'm trying to make a set of animated flat icons. The idea was to shrink the icon on hover and expand the pseudo element (::after) at the same time.

However, I'm having a problem on the text-shadow overflowing on the icon as seen in this image.

This is what I'm trying to achieve but with text-shadow. image

I tried using overflow:hidden but it's also making the pseudo element disappear as seen 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

Question:

Is it possible for a pseudo element to ignore/override the overflow property?

Or should I do a different markup altogether to achieve the design I want?

Answer 1

Unfortunately pseudo elements can't ignore the overflow property of their parents.

A good way to go around it is by creating a Parent for the property that should be outside of the element (in your case the Border) and give the child the 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>