从下往上滚动
近期升级为专业版用户名单

HTML代码:

<!-------------从下往上滚动开始了---------------->
<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>
<!-------------文本从下往上滚动---------------->

如果将分割线改成虚线(更美观),将上面2行红色代码替换为下面代码即可:
border-bottom: 0.2px dashed #ccc; /* 使用虚线作为分割线 */