Add an html element inside the html generated by Contact Form 7

Question

We are using Contact Form 7 plugin and would like to introduce an additional element ( italics (i)) inside the html code generated by Contact Form 7.

Contact Form 7 short tag:

[checkbox* areas_checkbox id:ftype_box class:checkbox use_label_element "Option1" "Option2" "Option3"]

HTML generated by CF7:

<span class="wpcf7-list-item first">
    <label>
    <input type="checkbox" name="areas_checkbox[]" value="Xero">
    <span class="wpcf7-list-item-label">Option1</span>
</label>
</span>
...

For styling reasons why need to add the element italics (i) before the options - Option 1, Option2 etc spans so it would look like this:

HTML generated by CF7:

<span class="wpcf7-list-item first">
<label><input type="checkbox" name="areas_checkbox[]" value="Xero">
<i></i>
<span class="wpcf7-list-item-label">Option1</span>
</label>
</span>
...

Is this possible through jquery or through CF7 shortcode (php)?

Answer 1

You can use before() to insert <i></i> before span.

$(document).ready(function(){
  //$( "i" ).insertBefore( $( ".wpcf7-list-item-label" ) );
  $('.wpcf7-list-item-label').before('<i></i>');
})

i{border:1px solid red; display:inline-block; height:10px; width:10px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="wpcf7-list-item first">
    <label>
    <input type="checkbox" name="areas_checkbox[]" value="Xero">
    <span class="wpcf7-list-item-label">Option1</span>
</label>
</span>