css: intermediate text with | effect ""

effect

Code

<div class="care-circle">
	<p>关爱圈</p>
	<p>
	  <em>20</em>
	  <span>获得的赞</span>
	  <i></i>
	  <em>245</em>
	  <span>收到的评论</span>
	</p>
</div>

.care-circle {
	display: flex;
	align-items: center;
	width: 6.9rem;
	height: 0.56rem;
	font-size: 0.24rem;
	background-color: rgba(0, 59, 137, 0.03);
	border-radius: 0.28rem;
	position: relative;
}
p:nth-of-type(2) {
	display: flex;
	align-items: center;
	position: absolute;
	right: 0.21rem;
	color: #999999;
	em {
	  color: #34b2da;
	  margin-right: 0.1rem;
	}
	i {
	  width: 0.02rem;
	  height: 0.35rem;
	  border-left: 1px solid #d8d8d8;
	  margin: 0 0.1rem;
	}
}