Contact Form7のcheckboxを項目内で改行させたい

Question

WordPressのプラグイン「Contact Form7」のcheckboxを項目内で改行させたいです。

上記写真の「項目1」と「説明1です。説明1です。」のように１つのチェックボックスの項目内の文章を改行させ、項目とその説明のような形にしたいです。

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

.wpcf7-list-itemに::afterとposition: absolute;で「説明です。」部分を表示させるようにCSSを書いてみました。
また、それぞれ説明が違うので:nth-child()を使いました。

.wpcf7-list-item {
	width: 47.5%;
	text-align: left;
	position: relative;
	padding-bottom: 50px;
}


.wpcf7-list-item:nth-child(1) ::after{
	content: '\A 説明1です。説明1です。';
	white-space: pre ;
	font-size: 12px;
	position: absolute;
	top: 40px;
}

【結果】
↓二重に「説明」が出てきてしまう。
.wpcf7-list-item ::after だけなら正常に反映されるが、4項目すべて同じ説明になってしまう。

該当のソースコード

ContactForm7のフォーム
[checkbox checkbox-491 use_label_element "項目1" "項目2" "項目3" "項目4"]

↓その部分のHTML

<p>
<span class="wpcf7-form-control-wrap checkbox-491">
<span class="wpcf7-form-control wpcf7-checkbox">
<span class="wpcf7-list-item first">
<label>
<input type="checkbox" name="checkbox-491[]" value="項目1" />
<span class="wpcf7-list-item-label">
項目1
</span>
</label>
</span>
<span class="wpcf7-list-item">
<label>
<input type="checkbox" name="checkbox-491[]" value="項目2" />
<span class="wpcf7-list-item-label">
項目2
</span>
</label>
</span>
<span class="wpcf7-list-item">
<label>
<input type="checkbox" name="checkbox-491[]" value="項目3" />
<span class="wpcf7-list-item-label">
項目3
</span>
</label>
</span>
<span class="wpcf7-list-item last">
<label><input type="checkbox" name="checkbox-491[]" value="項目4" />
<span class="wpcf7-list-item-label">
項目4
</span>
</label>
</span>
</span>
</span>
</p>

試したこと

二重に現れた部分を検証してみたら.wpcf7-list-item-label::afterだったので

.wpcf7-list-item-label ::after{
	content: '';
}

.wpcf7-list-item-label ::after{
	display: none;
}

.wpcf7-list-item-label ::after{
	opacity: 0;
}

等試してみましたが、重なった部分は消えなかったです。

他には、チェックボックスを項目ごとに1つずつ作成してみました。
【結果】
チェックボックスごとにContactForm7が<br>タグを挿入してしまうので「項目1」と「項目2」が横並びにならなくなってしまう。

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

CSSはVSCODEを使用して書いています。
WPは最新状態で、local by flywheelを使ってローカル開発環境で作成しています。
WPのプラグイン「Contact Form 7」を使用しました。

Answer 1

こんにちは。

.wpcf7-list-item:nth-child(1) ::after{

↑これは↓こういう意味です。

.wpcf7-list-item:nth-child(1) *::after{

意図しているのは↓これではありませんか？

.wpcf7-list-item:nth-child(1)::after{

Comments

[RRe_]

こんにちは！
ご回答ありがとうございます。

ご指摘の通り ::afterの前の空白を削除したら意図していた通りに動きました！
本当にありがとうございました！