html - 我如何使用css在边框上显示文本

Question

我正在使用这个设计提案创建 HTML 和 CSS：

但我的结果是：

HTML 代码：

<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 代码：

.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;
}

我想在边框上显示数字

我试过position:fixed了，但是我必须垂直或水平滚动，并且滚动时应该移动数字。所以它没有用。

标签： htmlcss