style.cssで設定した
新しいliはこちらです。
.ranking{ margin: 0; padding: 0; list-style-type: none; } .ranking li{ position: relative; margin: 0; padding: 0 0 0 16px; border-bottom: 1px dotted #ccc; } .ranking li::before{ position: absolute; top: 7px; left: 1px; color: #d05; content: "★"; font-size: 9px; } .ranking li:first-child::before, .ranking li:nth-child(2)::before, .ranking li:nth-child(3)::before{ position: absolute; top: 1px; left: 0; width: 0; height: 0; border: 6px solid transparent; border-bottom: 10px solid #fb0; content: ""; } .ranking li:first-child::after, .ranking li:nth-child(2)::after, .ranking li:nth-child(3)::after{ position: absolute; top: 9px; left: 0; width: 0; height: 0; border: 6px solid #fb0; border-top: 3px solid transparent; border-bottom: 6px solid #f90; content: ""; } .ranking li:nth-child(2)::before{ border-bottom: 10px solid #ccc; } .ranking li:nth-child(2)::after{ border: 6px solid #ccc; border-top: 3px solid transparent; border-bottom: 6px solid #aaa; } .ranking li:nth-child(3)::before{ border-bottom: 10px solid #d98; } .ranking li:nth-child(3)::after{ border: 6px solid #d98; border-top: 3px solid transparent; border-bottom: 6px solid #c76; } .ranking li span{ color: #9ab; font-size: 11px; }
既存のベーシックなliはこちらです。
/* list */ .post li, .post dt, .post dd { margin:0; line-height:200%; } .post ul li { background:url(http://datsumou-station.com/wp-content/uploads/2015/06/li.gif) no-repeat left 11px; padding:5px 0 0 20px; } .post ul ul, .post ol ol { margin:0 0 0 1em; }
おそらくliの画像をbackgroundに設定しているから、このようなことになるのかと思うのですが、
どうすれば改善するのでしょうか・・・?
ちなみに、既存の古い方のliは画像でなくても全く気にしていません。
何か似たような淡い色の楕円系であれば・・・。
rankingのliも、既存のベーシックなliも、
どちらも使いたいです。
出来たらコピペできる状態で直して下さると大変助かります。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/07 05:03