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

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.

<div class="page-content">
 <div class="card card-expandable">
       <div class="card-content">
             <p>Card interior</p>
.card::before {
    content: "test";
    display: inline-block;
    border: 1px solid red;
    position: absolute;
    top: -10px;

Any ideas?

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