:before和:after伪元素指定了⼀个元素⽂档树内容之前和之后的内容。'content'属性，与这些伪元素联⽤，指定了插⼊的内容。这个元素是要可以插⼊内容的，也就是说这个元素要是⼀个容器。
input，img，iframe等元素都不能包含其他元素，所以不能通过伪元素插⼊内容。⾄于Chrome 中checkbox和radio可以插⼊，那应该是Bug 了，要么就是姿势不对了。
所以以下⽤stylus 来实现的时候就⽤⽹友提供的⽅法啦。
原理都⼀样，就不多述了。
这⾥checkbox是⽤css⾃⼰写的。那可不可以⽤图⽚来实现呢？
⽤图⽚来实现就简单些了，因为不⽤⾃⼰去写○和√，直接⽤图⽚来代替，所以label的伪类我们可以只⽤⼀个，after 或 before 来插⼊图⽚，选中状态时再来改变该图⽚，就over了。
下⾯来看⼀个完整的例⼦：
1.效果图：
2.完整代码：
<template>
<div class="todo-wrapper">
<div v-for='todo in todos' :key='todo.id' :class="['todo-item', todoplated ? 'complated' : '']">
<input
type="checkbox"
v-model="todoplated"
>
<label>{{t}}</label>
<button class="del" @click="deleteTodo(todo.id)"></button>
</div>
</div>
</template>
<script>
export default {
data () {
return {
todos: [
{
id: 0,
content: '排球',
complated: false
},
{
id: 1,
content: '⾜球',
complated: false
},
},
{
id: 2,
content: '篮球',
complated: true
}
]
}
},
methods: {
deleteTodo (id) {
}
}
}
</script>
<style lang="stylus" scoped>
.todo-wrapper
padding 20px
font-size 18px
text-align left
background #ffffff
.todo-item
position relative
height 30px
&:hover
color #000
font-weight 500
.del:after //hover todo-item 时 .del 增加⼀个伪类并插⼊内容x
content 'x'
&plated // todo-item complated 类都存在时，设置label样式
label
color #ccc
text-decoration line-through
input[type='checkbox']
position absolute
left 0
top 0
z-index 2
width 20px
height 20px
opacity 0
label
position absolute
left 30px
top 0
height 20px
line-height 20px
&:before
content: ''
background url('../assets/images/unChecked.svg') center center no-repeat          background-size 96%
position absolute
left -30px
top 0
width 20px
height 20px
transition all .3s ease
.delabsolute relative
position absolute
top 0
right 10px
bottom 0
width 40px
height 40px
margin auto 0
font-size 30px
color #cc9a9a
margin-bottom 11px
transition color 0.2s ease-out

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。