CSSを使用してテキストを挿入する

私はCSSに比較的慣れていないので、CSSを使用してテキストのスタイルとフォーマットを変更しました。

これを使用して、次に示すようにテキストを挿入します。

<span class="OwnerJoe">reconcile all entries</span>

私はそれを次のように見せることができると思います：

ジョーのタスク：すべてのエントリを調整する

つまり、単に「Owner Joe」クラスであるJoe's Task:ために、テキストを表示したいのです。

私は次のようなコードでそれを行うことができます：

<span class="OwnerJoe">Joe's Task:</span> reconcile all entries.

しかし、クラスとテキストの両方を指定することは、非常に冗長に思えます。

私が探していることをすることは可能ですか？

編集 1つのアイデアは<li>、「箇条書き」が「Joe's Task」というテキストであるListItemとして設定することです。さまざまな箇条書きのスタイルを設定する方法の例や、箇条書きの画像も表示されます。リストの箇条書きに小さなテキストブロックを使用することは可能ですか？

ですが、CSS2対応ブラウザー（すべての主要ブラウザー、IE8 +）が必要です。

.OwnerJoe:before {
  content: "Joe's Task:";
}

しかし、私はむしろこのためにJavaScriptを使用することをお勧めします。jQueryの場合：

$('.OwnerJoe').each(function() {
  $(this).before($('<span>').text("Joe's Task: "));
});

誰もが気に入っているように思われるjQueryを使用した答えには大きな欠陥があります。Martin Hansenが正しい考えを持っていると思いdata-*ます。それはHTML5 属性を使用することです。また、アポストロフィを正しく使用することもできます。

html：

<div class="task" data-task-owner="Joe">mop kitchen</div>
<div class="task" data-task-owner="Charles" data-apos="1">vacuum hallway</div>

css：

div.task:before { content: attr(data-task-owner)"'s task - " ; }
div.task[data-apos]:before { content: attr(data-task-owner)"' task - " ; }

出力：

Joe's task - mop kitchen
Charles' task - vacuum hallway

また、CSSコンテンツ属性のattr（）関数も確認してください。要素の特定の属性をテキストノードとして出力します。次のように使用します。

<div class="Owner Joe" />

div:before {
  content: attr(class);
}

または、新しいHTML5カスタムデータ属性を使用しても：

<div data-employeename="Owner Joe" />

div:before {
  content: attr(data-employeename);
}

次のようにコーディングしてください：

.OwnerJoe {
  //other things here
  &:before{
    content: "Joe's Task: ";
  }
}