css使用伪类实现选中样式、实现删除按钮_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>
1
2
3
4
5
6
7
8

.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;;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

二、删除功能样式

实现效果

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

.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;
			}
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31