How can i show text over border with css - html

Question

I am creating HTML and CSS with this design proposal:
But my result is:
HTML code:
<div className="project_content">
<div className="project_quick f_bold" id="tab">
<a><span>업데이트</span><span className="alral_num">1</span></a>
<a><span>커뮤니티</span><span className="alral_num">34</span></a>
<a><span>통계</span></a>
</div>
</div>
CSS code:
.alral_num {
height: 20px;
padding: 2px 7px 0 7px;
margin: 0 0 0 5px;
display: inline-block;
background: #e8351d;
border-radius: 15px;
text-align: center;
color: #fff;
line-height: 1.2;
}
.project_content .project_quick .alral_num {
position:relative;
width: 20px;
display: table;
left: 20%;
margin-top: 5px;
}
.project_quick a {
height: 60px;
padding: 20px 40px 20px;
display: inline-block;
font-size: 16px;
background: url(../../assets/images/line01.gif) no-repeat right 50%;
}
.project_quick a:last-child{
background: none
}
.f_bold {
font-weight: 700 !important;
}
I want to show numbers over border
I have tried position:fixed, But i have to scroll vertically or horizontally, and the numbers should be moved when it scrolls. so it didn't work.