css使用伪类实现选中样式、实现删除按钮

一、选中样式实现效果

<div class="sign_step" ref="sortitem">
 <div class="move">item11</div>
 <div class="move">item11</div>
 <div class="move">item11</div>
<div class="no_sign_step"> item1 </div>
<div class="no_sign_step"> item1 </div>
<div class="no_sign_step"> item1 </div>
</div>

.sign_step div, .no_sign_step{
    
     // div基本样式
    cursor: pointer;
    height:36px;
    line-height: 36px;
    margin-right:10px;
    padding-left:20px;
    padding-right:20px;
    float:left;
    text-align: center;
    border:1px solid #b3b6b6;
    color: #b3b6b6;
    border-radius: 4px;
  }
  .sign_step div::after{
    
     // 对钩的三角行底色
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    content: "";
    border: 12px solid;
    border-color: #70cad3 #70cad3 transparent transparent;
    border-bottom-right-radius: 2px;
  }
  .sign_step div::before {
    
     // 对钩样式
    position: absolute;
    right: 2px;
    top: 3px;
    z-index: 1;
    width: 10px;
    height: 5px;
    content: '';
    background: transparent;
    border: 2px solid white;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-55deg);
    -ms-transform: rotate(-55deg);
    transform: rotate(-55deg);
  }
  .sign_step .move{
    
     // 可选择状态的样式
    border:1px solid #70cad3;
    color: #70cad3;
    position: relative;
    cursor: grab!important;;
  }

二、删除功能样式

实现效果

<div class="user_item_css">客户1</div>

.user_item_css{
    
    
			height: 36px;
			line-height: 36px;
			border: 1px solid #bfbfbf;
			border-radius: 8px;
			padding-left: 4px;
			padding-right: 14px;
			position: relative;
			margin-right: 6px;
			margin-top: 8px;
			&::before{
    
     // x样式
				position: absolute;
				right: 3px;
				top: 0px;
				z-index: 2;
				content: "x";
				line-height: 17px;
				color: white;
			}
			&::after{
    
     // 底色
				position: absolute;
				right: 0.1px;
				top: 0.2px;
				z-index: 1;
				content: "";
				border: 12px solid;
				border-top-right-radius: 8px;
				border-color: #f44336 #f44336 transparent transparent;
				border-bottom-right-radius: 2px;
			}
		}