效果
代码：
通过伪类的方式在content里面加点。然后定位在文字的下面。
<head>
<style>
.wavy {
position: relative;
}
.wavy:before {
content: "."; position: absolute; top: 10px; left: 2px;
}
</style>
<script src='js/jquery.min.js'></script>
<script>
$(document).ready(function () {
var text = $(".text").text();
var arr = [];
for (var i = 0; i < text.length; i++) {
arr.push(text.charAt(i));
}
console.log(arr)// 把每个文字都拆分开来放在数组里。["在", "我", "下", "面", "加", "点", "啊"]
var str = "";
arr.forEach(function (item) {
item = "<span class='wavy'>" + item + "</span>";
str += item;
})
console.log(str) ;//数组里的每个文字外面都加个标签<span class='wavy'>加</span><span class='wavy'>点</span><span class='wavy'>啊</span>
$(".text").html(str);
})
</script>
</head>
<body>
<div class="text">在我下面加点啊</div>
</body>
</html>
通过js编辑后的html实际是这样的
