汎用型リスト表及びテーブルに記述したテキストにカウンタを付けると2行になってしまう場合、以下の対応をしてください。
テキストにリンクがあると、カウンタとテキストの間が改行される問題
例示では、リンク先はエラーです。(アドレス未記入)。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- html --> <div class="list_flex samp1"> <ul> <li>文字種</li> <li>例示</li> </ul> <ul> <li class="in_link border_0"> <a href="url" target="_blank">ひらがな</a> <!-- ひらがな の文字を <span> タグの中に入れる --> </li> <li>あいうえお かきくけこ さしすせそ</li> </ul> <!-- 2行目省略 --> </div> |
1 2 3 4 5 6 7 8 |
/* css */ .samp1 ul:nth-of-type(1){counter-reset: ctr_1;} .samp1 ul:nth-of-type(n+2){ counter-increment: ctr_1;} .samp1 ul:nth-of-type(n+2) li:nth-of-type(1)::before{ /* before の前に span を入れる */ font-size:1.15em; content: counter(ctr_1)". ";} |
上記表示を改善させた表示
☆ 修正点は、html css 共にコメントで表示のように下記を修正。spanタグを挿入
1 2 |
<!-- html 9行を以下のように --> <a href="url" target="_blank"><span>ひらがな</span></a> |
1 2 |
/* css 5行目を以下のように */ .samp2 ul:nth-of-type(n+2) li:nth-of-type(1) span::before{ |