Adding box-shadow to a :after pseudo element <p>I have a div called <code>.testimonial-inner</code> and using the <code>:after</code> pseudo element I have an arrow that sits underneath it pointing down. The problem I'm having is adding a box-shadow to it all so they both look like one natural element.</p> <p>Without <code>box-shadow</code> on the triangle:</p> <p><img src="https://i.stack.imgur.com/4ws6h.png" alt="enter image description here"></p> <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>body { background: #eee } .testimonial-inner { background: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 30px; display: block; margin-bottom: 25px; position: relative; -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75); } .testimonial-inner:after { top: 100%; left: 48px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-top-color: #fff; border-width: 18px; margin-left: -18px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="c-4 testimonial-wrap"&gt; &lt;div class="testimonial-inner"&gt; &lt;p&gt;Using Facebook was unquestionably the best decision I could possibly have made at the point in my journalistic journey. It enabled me to share my fears, frustrations as well as successes.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p> <p>Notice the box shadow currently doesn't wrap around the arrow.</p> <p>When I add it to the <code>:after</code> declaration I get the following result: </p> <p><img src="https://i.stack.imgur.com/fuujT.png" alt="enter image description here"></p> <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>body { background: #eee } .testimonial-inner { background: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 30px; display: block; margin-bottom: 25px; position: relative; -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75); } .testimonial-inner:after { top: 100%; left: 48px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-top-color: #fff; border-width: 18px; margin-left: -18px; -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75); }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="c-4 testimonial-wrap"&gt; &lt;div class="testimonial-inner"&gt; &lt;p&gt;Using Facebook was unquestionably the best decision I could possibly have made at the point in my journalistic journey. It enabled me to share my fears, frustrations as well as successes.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p>