DIV代码如下：

<!-------------滚动部分---------------->
<div class="card">
<div class="card-header" style="background-color: #F3F3F3;">
<i class="fas fa-crown"></i>  近期升级为专业版用户名单
</div>
<div class="card-body" style="background-color: #FBFBFB;">

<div class="scroll-up">
<div class="text-container">
<p><i class="fas fa-user-circle mr-2"></i>  AAA</p>
<p><i class="fas fa-user-circle mr-2"></i>  BBB</p>
<p><i class="fas fa-user-circle mr-2"></i>  CCC</p>
<p><i class="fas fa-user-circle mr-2"></i>  DDD</p>
<p><i class="fas fa-user-circle mr-2"></i>  EEE</p>
</div>
</div>
	
</div>
</div>
<!-------------滚动部分---------------->

CSS代码如下：

<!-------------文本从下往上滚动---------------->
<style>
.scroll-up {
height: 60px; /* 设置滚动容器的高度 */
overflow: hidden; /* 隐藏溢出内容 */
}

.text-container {
animation: scroll-up 15s linear infinite; /* 应用动画 */
}
.text-container:hover {
  animation-play-state: paused; /* 鼠标悬停时暂停动画 */
}
@keyframes scroll-up {
0% {
transform: translateY(0); /* 初始位置 */
}
100% {
transform: translateY(-100%); /* 向上移动 */
}
}

.text-container p {
margin: 0; /* 去除默认外边距 */
line-height: 30px; /* 设置行高，以及行与行之间的间距 */
padding: 3px 0; /* 设置上下内边距，调整字体垂直居中 */
position: relative; /* 设置相对定位，以便后面的伪元素进行绝对定位 */
}

.text-container p::after {
content: ""; /* 添加空内容 */
position: absolute; /* 设置绝对定位 */
bottom: 0; /* 按钮对齐底部 */
left: 0; /* 对齐左边缘 */
width: 100%; /* 设置宽度，与文字宽度一致 */
height: 0.2px; /* 设置高度，即分割线的粗细 */
background-color: #ccc; /* 分割线的颜色 */
}
</style>
<!-------------文本从下往上滚动---------------->