文本顶部插入符号

Question

我有一个固定高度的下拉菜单，当我想向下滚动时，文本隐藏在顶部插入符号下方。 我还能做些什么来使文本在插入符号中可见？

我没有使用任何图像作为插入符号。一切都是使用CSS完成的。 这是我的代码：

<div class="arrow_box">

    <div class="content">

       .... text ....

    </div>

</div>

.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
width: 300px;
margin: 0 auto;
top:20%;
text-align: center;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #88b7d5;
border-width: 30px;
margin-left: -30px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 36px;
margin-left: -36px;
}

.content{
height: 200px;
width: 100%;
overflow-y:auto;
text-align: center;
}