dtに自動的にcounter(番号)をつける
HTML
test.php
<div class="event_prize">
<ul class="event_prize-list list-number">
<li>
<dl>
<dt>テスト1</dt>
<dd>菅義偉官房長官は12日の記者会見で、ロシアのプーチン大統領が前提条件をつけずに年内の平和条約締結を提案したことに対し、</dd>
</dl>
</li>
<li>
<dl>
<dt>テスト2</dt>
<dd>「政府としては北方四島の帰属の問題を解決して平和条約を締結する基本方針に変わりはない」と述べ、否定的な考えを示した。</dd>
</dl>
</li>
<li>
<dl>
<dt>テスト3</dt>
<dd>菅氏は10日の安倍晋三首相とプーチン氏の首脳会談について「両首脳間で、ご指摘のような発言があったということは承知していない」と強調した。</dd>
</dl>
</li>
</ul>
</div>
SCSS
_test.scss
.event_prize {
.event_prize-list {
> li {
&:not(:last-child) {
margin-bottom: 15px;
}
dl {
margin-top: 5px;
dt {
position: relative;
padding: 0 0 0 1em;
font-family: FOT-ロダンNTLG Pro EB;
font-size: 0.75rem;
line-height: (20/13);
&::before {
content: "\2022";
position: absolute;
top: 0;
left: 0;
}
}
dd {
margin-top: 8px;
margin-left: 15px;
font-size: 0.75rem;
line-height: (20/13);
a {
color: #fff100;
text-decoration: underline;
}
}
}
}
}
.list-number {
counter-reset: count;
> li {
dl {
dt {
padding: 0 0 0 1.5em;
}
dt::before {
content: counter(count) ".";
counter-increment: count;
}
}
}
}
}
@media only screen and (min-width: 768px) {
.event_prize {
.event_prize-list {
> li {
dl {
margin-top: 0;
overflow: auto;
dt {
font-size: 1rem;
line-height: (22/15);
}
dd {
font-size: 0.875rem;
line-height: (20/14);
}
}
}
}
}
}
Author And Source
この問題について(dtに自動的にcounter(番号)をつける), 我々は、より多くの情報をここで見つけました https://qiita.com/test6tyome/items/8f4bea9a16f8a32c3f75著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .