Can't show whole ::before element of expandable card

Questions
1

I want to attach a shape to the top of an expandable card, using ::before to show an image outside the boundary of the rectangle (such as a triangle to protrude through an otherwise straight top edge)

However, all ::before content disappears once it is outside the card, with only the content that fits inside the boundary being rendered.

32%20PM
Screen Shot 2020-02-11 at 9.54.32 PM.png732×668 53.9 KB 

<div class="page-content">
 <div class="card card-expandable">
       <div class="card-content">
             <p>Card interior</p>
        </div>
    </div>

.card::before {
    content: "test";
    display: inline-block;
    border: 1px solid red;
    position: absolute;
    top: -10px;
}

Any ideas?

2

Yes, because card-content is scrollable -> it has overflow: auto css rule with doesn’t allow to put anything outside of it