CSSだけで添付図のように整形できますか？

質問

CSSだけで添付図のように整形できますか？

CSSのスキルアップのための問題を作りました。

　　 [仕様]
　　・商品には 括弧付き番号が振ってある
　　・点線の下線が引いてある
　　・元値は 青色文字で 薄い桃色の背景色になっている
　　・売値は 赤色文字で 黄色の背景色になっている
　　・タグは変更、追加、削除ができない
　　・ＣＳＳだけで整形のこと

[CSS]
<style>
/* 添付図のように整形するスタイル設定 */
</style>

[HTML]
<ul id="Product_List">
<li>商品A<p><del>345円</del> 234円</p></li>
<li>商品B<p><del>2,000円</del> 1,234円</p></li>
<li>商品C<p><del>1260円</del> 850円</p></li>
<li>商品D<p><del>100円</del> 80円</p></li>
<li>商品E<p><del>150円</del> 120円</p></li>
<li>商品F<p><del>500円</del> 450円</p></li>
</ul>

CSSのスキルアップに励んでいる方の回答をお待ちしております。

回答No.2

fji-jp · ベストアンサー

スキルアップ問題に目に止まったため回答してみました。

ul {
counter-reset: number 0;
margin: 0px;
padding: 0px;
* {
margin: 0px;
}
li {
list-style: none;
width: 18.5em;
border-bottom: 1px dotted gray;
&:before {
counter-increment: number 1;
content: "[" counter(number) "] ";
}
* {
display:inline-block;
position: absolute;
text-align: right;
}
p {
width: 5em;
left: 13.5em;
background-color: yellow;
color: red;
del {
width: 4.5em;
right: 6.5em;
background-color: mistyrose;
color: blue;
}
}
}
}

お礼

ご参加いただき御礼申し上げます。

Powered by GRATICA

補足

確認させて頂きました。
完璧でした！　( ^o^)/🎉

回答No.1

t_ohta

近い所まではいけるけど、売値部分がタグで囲まれていないため個別のスタイル定義が出来ないので文字の右揃えや背景の塗りつぶし範囲を指定できないですね。

<style>
body {counter-reset: number 0;}
ul{ padding-left: 0; }
li{ list-style: none; border-bottom: 1px dotted black; width: fit-content; }
li:before { counter-increment: number 1; content: "[" counter(number) "] "; }
li > p { display: inline-block; margin: 0 0 0 2em; color: red; background-color: #fdff00; }
li > p > del { display: inline-block; color: blue; background-color: #ffe3e1; width: 5em; text-align: right; margin-right: 2em; }
</style>

お礼

ご参加いただき御礼申し上げます。

Powered by GRATICA

補足

＞売値部分がタグで囲まれていない
そこに着目されたのは素晴らしいです。

＞文字の右揃えや背景の塗りつぶし範囲を指定できない
そんなことはありません。
このあたりこそ、腕の見せ所ですね。