Add border with an arrow?

Hey!

Hope you’ll be able to help me with this. I would like to add to a table a border that includes an arrow like it can be seen at the bottom of this post:
https://www.macgamerhq.com/shooter/overwatch-mac-release/

The basic CSS code I use is the following (but I don’t see how to add the :after and :before code to a tablepress table):

.arrow_box {
position: relative;
background: #ffffff;
border: 7px solid #f7766d;
padding-top: 20px!important;
padding-right: 30px!important;
padding-bottom: 20px!important;
padding-left: 30px!important;
}
.arrow_box:after, .arrow_box:before {
top: 102%;
left: 30%;
border: solid transparent;
content: ” “;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #ffffff;
border-width: 10px;
margin-left: -10px;
}
.arrow_box:before {
border-color: rgba(247, 118, 109, 0);
border-top-color: #f7766d;
border-width: 20px;
margin-left: -20px;

The page I need help with: [log in to see the link]