css記述の続編

質問

先日css記述の件で質問しましたが、また分からないことがありました。
番号付きリストで括弧を使うとき、説明文が折り返したとき、頭を揃えるにはどうすればいいでしょう。（括弧は赤文字、他は黒）

1.(1)説明説明説明説
　　明説明説明
　(2)説明説明説明説
　　明説明説明説明

2.説明説明説明

回答No.2

amaryllis_watch

それは、色でしょう。
color:red;を加えればいいですよ。

回答No.1

amaryllis_watch

先回の質問に答えた人が言う通りにcontentを使います。
よって、下記のコードでいくと望み通りのレイアウトになると思います。

＜html＞
<div class="contents">
<ol>
<li>
<p class="list">テキスト</p>
<span>ああああああ</span>

<p class="list">テキスト</p>
<span>ああああああ</span>
</li>
<li>
<p>テキスト</p>
</li>
</ol>
</div>

＜css＞
.contents {
counter-reset:list;
line-height: .5;
}
.list {
counter-increment:list;
}
.list:before {
content:"(" counter(list) ")";
}
span {
margin-left: 1.5rem;
}

お礼

回答ありがとうございます。
やってみましたが私が意図するものと結果は違うようです。