CSS改变Tab标签下border的长度

需求：改变Tab标签下的border的的长度

思路：使用伪元素，定义元素宽度

方式一：为元素添加border
方式二：为元素添加背景颜色（可带圆角，如下图）

效果：

代码：

<template>
	<view class="tab">
		<view :class="['item', tabIndex==0?'active':'']" @click="handleTab(0)">
			音乐
		</view>
		<view :class="['item', tabIndex==1?'active':'']" @click="handleTab(1)">
			播客
		</view>
		<view :class="['item', tabIndex==2?'active':'']" @click="handleTab(2)">
			动态
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0
			}
		},
		methods: {
			handleTab(index) {
				this.tabIndex = index
			}
		}
	}
</script>

<style lang="scss">
	.tab {
		display: flex;
		margin-top: 20rpx;

		.item {
			flex: 1;
			height: 70rpx;

			text-align: center;
			color: rgba(173, 173, 173, 1);
			font-size: 30rpx;
			font-weight: 400;
			line-height: 58rpx;
		}

		.active {
			color: rgba(255, 0, 0, 1);
			text-align: center;
		}

		.active::after {
			content: '';
			width: 15%;
			height: 4rpx;
			display: block;
			margin: 0 auto;
			padding: 1px;

			// 方案一: 通过border-bottom实现 
			// border-bottom: 4px solid rgba(255, 0, 0, 1);

			// 方案二: 通过background-color实现 (可带圆角)
			background-color: rgba(255, 0, 0, 1);
			border-radius: 4rpx;

		}
	}
</style>