擬似要素::afterで追加した文字が横並びにならない

前提・実現したいこと

HTML, CSSを使い、

□1 テキスト1
□2 テキスト2
...

のように表示される画面を作ろうと考えています。

問題：□と数字が横並びにならない

実装するにあたり、divを用いて作成した□に擬似要素afterで数字を並べるように作成しようとしました。しかしながら、□と数字が横並びにならず困っています。

該当のソースコード

HTML
1<li class="outerTaskBox">
2    <div class="arrowButton">
3        <div class="arrowMark"></div>
4    </div>
5    <div class="todo-tasks"><p>テストメッセージ</p>
6    </div>
7</li>

CSS
1.list {
2    font-size: 150%;
3    margin: 10% auto;
4    width: 50%;
5}
6
7
8
9.todo-tasks {
10    width: 80%;
11    display: inline-block;
12    margin: 0;
13}
14
15
16ol {
17    counter-reset: number; 
18    list-style: none; 
19    margin: 0;
20    padding: 0;
21}
22
23
24.arrowMark:after {
25    counter-increment: number; 
26    content: counter(number); 
27    font-size: 18px;
28    display: inline;
29}
30
31.allTodoText {
32    display: inline-block;
33    width: 100%;
34    outline: none;
35    margin: 0;
36}
37
38.arrowMark {
39    width: 12px;
40    height: 12px;
41    border: 2px solid;
42    display: inline-block;
43    margin: 12px 12px;
44}
45
46.arrowButton {
47    display: inline-block;
48    width: 100px;
49    height: 36px;
50    margin: 0 0 0 auto;
51}
52
53.outerTaskBox {
54    margin: 0 0;
55    display: flex;
56}
57

試したこと

arrowMarkをインラインにしてみましたが、ダメでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

横に配置するだけなら絶対配置で可能です。
位置はご自分で調整してください。

css
1.arrowMark:after {
2    counter-increment: number; 
3    content: counter(number); 
4    font-size: 18px;
5    display: inline;
6    position: absolute; /* 追加 */
7    left: 20px; /* 追加 */
8}
9
10.arrowMark {
11    width: 12px;
12    height: 12px;
13    border: 2px solid;
14    display: inline-block;
15    margin: 12px 12px;
16    position:relative; /* 追加 */
17}