Question

I’m looking for a way in CSS to place a symbol into the margin of the document to highlight/indicate the position of some special phrase in the text body of the document. Think of the usual text-editors in programming IDEs that place little warning icons in the margin next to lines that contain errors.

This is easy to do if the document consists of non-wrapped single lines. Then I can just check if the line needs the symbol and place it manually.

But it gets tricky if I want to, for example, place an icon for spelling mistakes in a document where the browser automatically breaks the lines. Then I would have to have a way to figure out which line the spelling mistake ended up in. This is probably also possible with JS by checking the y-coordinate of some wrapper-span that marks the spelling mistake, but I’m looking for something more elegant.

Is there some trick with float-left or absolute positioning that allows me to, for example, put this marker symbol into the span that marks the error and have it be placed in the left margin of the document instead of inside the boundaries of the span?

Answer 1

Actually, the answer is exactly as you described. Have spans wrapping your text, and inside the span, include an icon element. Then float it left, and set a negative margin on it. Example:

CSS:

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

Markup:

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

Working example: http://jsfiddle.net/FQCsn/