我正在创建一个小的“diff -/offset”显示，我想在文本中的某些地方绘制某种“线”，以可视化发生“diff”的位置。基本上我想从中得到:
这个或类似的东西:
我知道 Canvas 元素，我可以用它画线，但我怎么能把这样的图像放在正确的位置呢？
对于像这样的方法，是否有一个“简单”的 CSS 解决方案？
有什么我可以遵循的最佳做法吗？例如，任何 ToolTip 插件/脚本必须使用类似于指向特定位置的东西。
非常感谢您对此提供的任何帮助提示。我的 jsfiddle 的原始链接: http://jsfiddle.net/bKng6/
最佳答案
我不确定您的应用程序应该执行的预期行为是什么(谈论与最终用户的交互)。您没有提到解决方案将如何跨浏览器。无论如何，如果没有一些 JavaScript 片段，我认为纯 CSS(也包括 CSS3)无法解决这个问题。所以，我想补充 tucuxi和 FelipeAls's建议。
基本上，关于这条线，在开发过程中要记住一些事情:
有很多解决方案可以划清界线。如前所述，Canvas 是一种选择，但我确信它不是更简单的选择。
tucuxi 建议的工作示例是通过 CSS annitations 完成的，什么是不错的选择，比 canvas 更简单，并且可以改进以完成 FelipeAls's 提出的相同设计。 .
如果您预期与最终用户的视觉交互接近 FelipeAls 的建议，默认情况下边框宽度为 2px 的 div，加上右侧和底部边框宽度设置为 0 将解决您的线条疑问。我制作了工作样本 right here .在建议的示例中，我使用 DOM 相对位置来测量正确的行位置。尽管我是使用 jQuery 完成的，但您始终可以在纯 JS 或其他基于 DOM 的库(如 Mootools)中完成此操作。
希望对你有帮助
关于javascript - 绘制 DOM "pseudo"行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10532558/