css或者html为文字下方都加点

只使用css和html能实现给一个标签下的所有文字下方或者文字上方加点吗(多少字符加多少点)

image.png(所有文字下方加点)

阅读 5.1k
3 个回答

兼容性一般的原生属性:text-emphasis

text-emphasis: dot;
text-emphasis-position: under;

-webkit-text-emphasis: dot;
-webkit-text-emphasis-position: under;

image.png

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
      .spot {
          position: relative;
      }
      .spot:before {
          content: "."; position: absolute; top: 8px; left: 4px;
      }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.1.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='spot'>" + item + "</span>";
              str += item;
          })
          $(".text").html(str);
      })
  </script>
</head>
<body>
<p class="text">测试点号</p>

<div style="display: flex;">
  <p class="spot">测</p><p class="spot">试</p><p class="spot">点</p><p class="spot">号</p>
</div>
</body>
</html>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题