position: absolute
疑似要素のコンテキストでのアプリケーションもあると思います:before
。これを試して、探しているものが得られるかどうかを確認してください。
<html>
<head>
<title>Lorem Ipsum</title>
<style>
.allowLeftMargin
{
margin-left: 5em;
}
.highlightThis
{
background-color: yellow;
}
.highlightThis:before
{
background-color: yellow;
content: "Note";
padding-left: 0.25em;
padding-right: 0.25em;
position: absolute;
left: 1em;
}
</style>
</head>
<body>
<div class="allowLeftMargin">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
<span class="highlightThis">Excepteur sint occaecat</span>
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
</body>
</html>
ブラウザウィンドウのサイズをすばやく調整して、メモが強調表示されたスパンで移動することを確認できます。