After pseudoelement appear outside overflow-y ancestor - css

Question

I am trying to create a list of elements inside a wrapper container with overflow-y set to scroll. The problem is that I want each of these elements to have a tag appear on their right on hover.
This wrapper is inside of a vertical container with fixed width (cant be modified), which is used to align the wrapper with their siblings.
I am using an after pseudoelement to achieve this. The problem comes when I try to position the tag outside the wrapper container, which makes the tags not render.
Some example code:
<div class="wrapper">
<p class="item" data-text="tag-1">
item1
</p>
<p class="item" data-text="tag-2">
item2
</p>
<p class="item" data-text="tag-3">
item3
</p>
</div>
.wrapper {
width: 10rem;
height: 5rem;
padding: 1rem;
border: 1px solid red;
overflow-y: scroll;
font-size: 2.5rem;
}
.item{
position: relative;
font-size: 2rem
}
.item::before{
content: "#";
}
.item::after{
content:attr(data-text);
position: absolute;
top: 50%;
left: 10rem;
padding: 1rem;
transform: translateY(-50%);
font-size: 1rem;
color: white;
background-color: black;
border-radius: 500px;
cursor: pointer;
}
In this case I want the tags to appear outside the wrapper but positioned relative to their parent element. Is this posible to achieve using only css?
I tried using different positions, setting the overflow-x to visible and almost every answer I could find except using JS.