如何在伪元素之后和之前添加框阴影？

Question

我正在尝试做聊天框....我想要伪装元素的相同颜色和方框阴影类似于关注框..我试过但它不起作用....

这是我的codepen链接http://codepen.io/mgkrish/pen/qmEpeP?editors=1100

＆＃13;

＆＃13;

.chat_other{
padding: 30px;

   
   padding-bottom: 15px; 
   padding-top: 15px;
display: flex;
   background-color: #ffffff;
  
   box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.15);
   border-radius: 14px;
   width: 50%;
   position: relative;
   margin-left:30px;
}
    .chat_other:before {
           content: "";
    position: absolute;
    z-index: -1;
    bottom: -2px;
    left: -23px;
    height: 20px;
    border-left: 40px solid #E5E5EA;
    border-bottom-right-radius: 16px 14px;
    border-bottom-left-radius: 9px;
    -webkit-transform: translate(0, -2px);
    }

  .chat_other:after {
       content: "";
    position: absolute;
    z-index: -1;
    bottom: 0px;
    left: 4px;
    width: 26px;
    height: 20px;
    background: white;
    border-bottom-right-radius: 24px;
    border-bottom-left-radius: 3px;
    -webkit-transform: translate(-30px, -2px);
   
    /* border: 1px solid red; */}
.chat_self{
    background-color: #e6f7fd;
      border-radius: 14px;
      padding:30px;
         padding-top: 0;
           box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.15);
           width: 50%;
                margin-right: 28px;
               padding-bottom: 15px;
               position: relative;
}
.chat_self:before {
  content: "";
    position: absolute;
    z-index: -1;
    bottom: -2px;
    right: -26px;
    height: 20px;
    border-right: 56px solid #e6f7fd;
    border-bottom-left-radius: 15px 19px;
    -webkit-transform: translate(0, -2px);
    border-bottom-right-radius: 43px;

}
.chat_self:after {
  content: "";
    position: absolute;
    z-index: -1;

    bottom: 4px;
    right: -59px;
    width: 29px;
    height: 20px;
    background: white;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 9px;
    -webkit-transform: translate(-30px, -2px);

}

＆＃13;

 <div class="chat_other">
                   	
                   	<p>Hey guys! Hope everything is doing great. Who’s up for a run today? I am really excited about the fact that all of you can join me for this.</p>
                   	<p class="msg_time">12.47</p>
                   </div>

                     </div>
                     <div class="self">	

 
                  
                   <div class="chat_self">
                   	
                   	<p>Hey guys! Hope everything is doing great. Who’s up for a run today? I am really excited about the fact that all of you can join me for this.</p>
                   	 	<p class="msg_time">12.47 </p>
                   </div>

                     </div>

＆＃13;

＆＃13;

＆＃13;