身为一个后端，前端的知识终究是太过深奥，很多需要实现的效果在专业的前端看来，很容易实现，都不需要用到js等方法，单纯的靠CSS就能实现。
今天又学会一个技巧
要想在前端网页上实现下面这个效果，每个名字中间加上一个逗号，
张三，李四，王五，赵六
以我的能力，我可能会想到vue中的v-for循环来做，然后使用v-if来控制是否显示，的效果，代码会是下面这样的
<template>
<div>
<template v-for="(item,index) in list">
<span>{{ item }}</span>
<span v-if="index < list.length-1">,</span>
</template>
</div>
</template>
<script>
export default{
data() {
return {
list: ["张三","李四","王五","赵六"]
}
},
}
</script>现在才发现还有超级简单的方式
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 方法1 */
/* .item+.item::before{
content: ",";
} */
/* 方法2 */
.item:not(:first-child)::before{
content:','
}
</style>
</head>
<body>
<span class="item">张三</span>
<span class="item">李四</span>
<span class="item">王五</span>
<span class="item">赵六</span>
</body>
</html>