当前位置：文江博客话题详情

CSS HTML 前端

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

发布于 2022-09-13 01:26:03 字数 128 浏览 31 评论 0

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

(所有文字下方加点)

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（3）

熟人话多 2022-09-20 01:26:03

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

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

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

最佳男配角 2022-09-20 01:26:03

下面这种方案或许可以考虑
https://jsbin.com/nisehokake/...,output

子栖 2022-09-20 01:26:03

<!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>

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

21 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

花开柳相依

文章 0 评论 0

zyhello

文章 0 评论 0

故友

文章 0 评论 0

对风讲故事

文章 0 评论 0

Oo萌小芽oO

文章 0 评论 0

梦明

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文