.underline {
    position: relative;
}

.underline::after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
}

.box-shadow::after {
  content: "";
  position: absolute;
  width: 100%;
  bottom: -1px;
  z-index: -1;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.4);
}

.element {
  position: relative;
}

<div class="element box-shadow">
  <!-- content here -->
 </div>

.element::before {
    content: "";
    position: absolute;
    top: -18px; /* positions arrow on top of container */
    left: 50%; /* works with transform to center the arrow */
    transform: translateX(-50%);
    border: 10px solid; /* creates a 10px box */
/*  border-color: red green yellow black; */ 
    border-color: transparent transparent white transparent;
    /* the red/green etc used for testing, then swap to transparent version */
}