リストマークの位置を1行目に表示したいです

前提・実現したいこと

スマホから見た時に、折り返しの文章に付くリストマークの位置が、下記画像のように表示されてしまいます。
1行目に表示されるよう固定したいのですが、解決できずに困っております。

どうかご教授頂けましたら幸いです。

発生している問題・エラーメッセージ

該当のソースコード

CSS
1ul.sample1{
2  counter-reset:list;
3  list-style-type:none;
4  font: 14px/1.6 'arial narrow', sans-serif;
5  padding:0;
6}
7ul.sample1 li{
8  position:relative;
9  padding: 0 0 0 20px;
10  margin: 7px 0 7px 0px;
11  font-weight: bold;
12  font-size:14px;
13  line-height: 30px;
14  border-bottom: dashed 1px #FFFFFF;
15}
16ul.sample1 li:before{
17  counter-increment: list;
18  content: "";
19  display: block;
20  position: absolute;
21  left: 0px;
22  height: 10px;
23  width: 10px;
24  border-radius: 50%;
25  background: #00afcc;
26  top: 50%;
27  -moz-transform: translateY(-50%);
28  -webkit-transform: translateY(-50%);
29  -o-transform: translateY(-50%);
30  -ms-transform: translateY(-50%);
31  transform: translateY(-50%);
32}

HTML
1<ul class="sample1">
2<li>ああああ</li>
3<li>ああああ</li>
4<li>あああああああああああああああああああああああああああああああああああああああ</li>
5</ul>

m.ts10806

2021/09/08 22:50

HTMLも基本省略せずコピペで提示してください。

yorusame

2021/09/08 22:54

先ほど訂正致しました。ご指摘ありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

top: 50%; で上下中央に配置しているのでそれを修正すればいいでしょう。

css
1ul.sample1 li{
2  position:relative;
3  padding: 0 0 0 20px;
4  margin: 7px 0 7px 0px;
5  font-weight: bold;
6  font-size:14px;
7  line-height: 30px;
8  border-bottom: dashed 1px #FFFFFF;
9}
10ul.sample1 li:before{
11  counter-increment: list;
12  content: "";
13  display: block;
14  position: absolute;
15  left: 0px;
16  height: 10px;
17  width: 10px;
18  border-radius: 50%;
19  background: #00afcc;
20  top: 10px; /* 修正 */
21/* 以下削除  
22  -moz-transform: translateY(-50%);
23  -webkit-transform: translateY(-50%);
24  -o-transform: translateY(-50%);
25  -ms-transform: translateY(-50%);
26  transform: translateY(-50%);*/
27}