Home>
I want to break the checkbox of the WordPress plugin "Contact Form 7" in the item.


I want to break the text in the item of one check box like "Item 1" and "Explanation 1. Explanation 1" in the above picture, and make it like the item and its explanation.

I wrote CSS to display the "Explanation" part with :: after and position: absolute;in .wpcf7-list-item.
Also, I used: nth-child () because each explanation is different.

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

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


【result】
↓ Double "explanation" appears.
.wpcf7-list-item :: after is reflected normally, but all 4 items have the same explanation.

Corresponding source code

Contact Form 7 form
[checkbox checkbox-491 use_label_element "item 1" "item 2" "item 3" "item 4"]

↓ HTML of that part

<p>
<span>
<span>
<span>
<label>
<input type = "checkbox" name = "checkbox-491 []" value = "item 1" />
<span>
Item 1
</span>
</label>
</span>
<span>
<label>
<input type = "checkbox" name = "checkbox-491 []" value = "item 2" />
<span>
Item 2
</span>
</label>
</span>
<span>
<label>
<input type = "checkbox" name = "checkbox-491 []" value = "item 3" />
<span>
Item 3
</span>
</label>
</span>
<span>
<label><input type = "checkbox" name = "checkbox-491 []" value = "item 4" />
<span>
Item 4
</span>
</label>
</span>
</span>
</span>
</p>
What I tried

When I verified the part that appeared twice, it was .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;
}


I tried, but the overlapping part did not disappear.

Another thing I tried was to create one checkbox for each item.
【result】
Since Contact Form 7 inserts a
tag for each check box, "Item 1" and "Item 2" will not be side by side.

Supplementary information (FW/tool version, etc.)

CSS is written using VSCODE.
WP is up to date and created in a local development environment using local by flywheel.
I used the WP plugin "Contact Form 7".

  • Answer # 1

    Hello.

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

    ↑ This is ↓ This is what it means.

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

    What is intended is ↓ Isn't this?

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