html - 使用 CSS 将链接到文本短语的符号放置到文档的边距中

Question

我正在寻找一种在 CSS 中将符号放置在文档边缘的方法，以突出显示/指示某些特殊短语在文档正文中的位置。想想编程 IDE 中常用的文本编辑器，它们会在包含错误的行旁边的空白处放置小警告图标。

如果文档由未换行的单行组成，这很容易做到。然后我可以检查该行是否需要符号并手动放置它。

但是，如果我想在浏览器自动换行的文档中放置一个拼写错误图标，就会变得很棘手。然后我将不得不有一种方法来找出拼写错误最终出现在哪一行。这对于 JS 也可能通过检查一些标记拼写错误的包装跨度的 y 坐标来实现，但我正在寻找更优雅的东西。

是否有一些关于左浮动或绝对定位的技巧可以让我，例如，将这个标记符号放入标记错误的范围内，并将其放置在文档的左边距而不是边界内跨度？

Answer 1

实际上，答案完全如您所述。用 span 包裹您的文本，并在 span 内包含一个图标元素。然后向左浮动，并在其上设置负边距。示例:

CSS:

.icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: blue;
  float: left;
  margin-left: -15px;
  margin-top: 5px;
}

标记:

<span class="selected"><span class="icon"></span>this is some text in a span. </span> 

工作示例:http://jsfiddle.net/FQCsn/