【前端CSS】——CSS伪类实现底部横条样式

一、结果

二、利用伪类实现

<template>
 <div class="item"></div>
</template>

<style scoped>

.item::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 5px;
  right: 0;
  width: 30px;
  margin: 0 auto;
  height: 3px;
  border-radius: 4px;
  background-color: #fff;      
}
</style>