floatによる回り込みの影響のせいか、表示が崩れてしまう為にその解決策を教えて頂きたいです。

floatを使った文章に擬似要素を使って矢印のアイコンを付けているのですが、画面幅を狭めていくと改行された文章に対しては擬似要素で付けた矢印の位置がおかしくなってしまいます。
この原因と解決策を教えて頂きたいです。
＊尚、floatの使い方に関する学習をしている為にflexboxは使用しない前提です。

【改行せずに正常な状態】

【画面幅を狭めて改行が入ると矢印の位置がおかしくなっている状態】

以下、コードの内容です。

HTML
1<body>
2  <main>
3    <section>
4      <div class="mainContents">
5        <div class="p-contents">
6          <div class="p-contentsBox clearfix">
7            <p class="p-contentsBox__item">テキスト</p>
8            <p class="p-contentsBox__item">テキスト</p>
9            <p class="p-contentsBox__item">テキスト</p>
10            <p class="p-contentsBox__item">テキストテキスト</p>
11            <p class="p-contentsBox__item">テキストテキスト</p>
12            <p class="p-contentsBox__item">テキストテキスト</p>
13          </div>
14        </div>
15      </div>
16    </section>
17  </main>
18</body>

CSS
1@media screen and (min-width: 796px) { 
2
3  .p-contents {
4    border-bottom: 1px solid #000;
5    width: 100%;
6  }
7
8  .p-contentsBox{
9    width: 80%;
10    margin: 20px auto 30px;
11    position: relative;
12  }
13
14  .p-contentsBox__item {
15    color: blue;
16    float: left;
17    margin-right: 40px;
18  }
19
20  .p-contentsBox__item:last-child {
21    margin-right: 0;
22  }
23
24  .p-contentsBox__item::after {
25    content: "";
26    display: inline-block;
27    width: 15px;
28    height: 15px;
29    background-image: url(/assets/images/common/arrow.png);
30    background-size: contain;
31    position: absolute;
32    margin-left: 5px;
33    top: 5px;
34  }
35
36  .clearfix::after {
37    content: "";
38    clear: both;
39    display: block;
40  }
41
42}

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

回答1件

ベストアンサー

絶対配置をやめればいいのではないかと思います。

css
1.p-contentsBox__item::after {
2	content: "→";
3	display: inline-block;
4	width: 15px;
5	height: 15px;
6	background-image: url(/assets/images/common/arrow.png);
7	background-size: contain;
8	/* position: absolute; ←これをやめる */
9	margin-left: 5px;
10	/* top: 5px; ←これも */
11}