css伪元素实现选中卡片的角标

最终实现效果图

伪元素

• css3中为了与伪类做区别，伪元素采用双冒号的写法
• 因为兼容性的问题，现在大部分还是统一的单冒号
• 但是在新的在CSS3中引入的伪元素就不允许用单冒号的写法
• ::before或::after都必须和content属性结合使用，content必须要有
• 伪元素的display默认为inline

 - ::after // 在每个 <p> 元素之后插入内容
 - ::before // 在每个 <p> 元素之前插入内容

实现代码

<template>
	// card-item是未选中样式，card-active是选中样式
	<div
		:class="[isChange === i.name ? 'card-active' : 'card-item']"
		v-for="i in statusList"
		:key="i.name"
		@click="changeStatus(i.name)"
	>
        <span>{{i.num}}</span>
        <span>{{i.name}}</span>
    </div>
</template>
<style>
.card-active {
   // 可以写一些其他需要的样式
   position: relative; // 必须要有
}
.card-active:before {
   content: '';
   position: absolute;
   right: 0;
   bottom: 0;
   border: 17px solid #108bff;
   border-top-color: transparent;
   border-left-color: transparent;
}
.card-active:after {
   content: '';
   width: 7px;
   height: 12px;
   position: absolute;
   right: 6px;
   bottom: 6px;
   border: 2px solid #fff;
   border-top-color: transparent;
   border-left-color: transparent;
   transform: rotate(45deg);
}
</style>