这是表格代码：

<form method="post" action="https://www.publictalksoftware.co.uk/wp-login.php" class="bbp-login-form">
  <fieldset class="bbp-form">
    <legend>Create an account</legend>

    <div class="bbp-template-notice">
      <p>Your username must be unique,and cannot be changed later.</p>
      <p>We use your email address to email you a secure password and verify your account.</p>

    </div>

    <div class="bbp-username">
      <label for="user_login">username: </label>
      <input type="text" name="user_login" value="" size="20" id="user_login" tabindex="101">
    </div>

    <div class="bbp-email">
      <label for="user_email">Email: </label>
      <input type="text" name="user_email" value="" size="20" id="user_email" tabindex="102">
    </div>

    <p><label>Security Question</label></p>
    <p>
      <select name="seq_ques[]" class="input" style="font-size:14px; height:35px;">
        <option value="16">"Sing Out Joyfully to Jehovah" Scripture?</option>
      </select><label>Your Answer<br><input type="text" name="seq_ans[]" id="seq_ans[]" value="" class="input"></label></p>
    <div class="anr_captcha_field">
      <div id="anr_captcha_field_1" class="anr_captcha_field_div">
        <div style="width: 304px; height: 78px;">
          <div><iframe src="https://www.google.com/recaptcha/api2/anchor?ar=1&amp;k=6Lc061QUAAAAAHzXUIbnlghp8LcJD1x5EtlRfrQi&amp;co=aHR0cHM6Ly93d3cucHVibGljdGFsa3NvZnR3YXJlLmNvLnVrOjQ0Mw..&amp;hl=en-GB&amp;v=66WEle60vY1w2WveBS-1ZMFs&amp;theme=light&amp;size=normal&amp;cb=1bfdqzy83l4n"
              width="304" height="78" role="presentation" name="a-wtj5g7sxqs30" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox"></iframe></div>
          <textarea
            id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193,193,193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea>
        </div>
      </div>
    </div>
    <div class="bbp-submit-wrapper">

      <button type="submit" tabindex="103" name="user-submit" class="button submit user-submit">Register</button>


      <input type="hidden" name="action" value="register">
      <input type="hidden" name="user-cookie" value="1">

      <input type="hidden" id="bbp_redirect_to" name="redirect_to" value="?checkemail=registered"><input type="hidden" id="_wpnonce" name="_wpnonce" value="19d211952c"><input type="hidden" name="_wp_http_referer" value="/register/">
    </div>
  </fieldset>
</form>

这是一个小提琴：

https://jsfiddle.net/jvawo134/

我的实际页面是here。

它显示一种形式：

是否可以使用CSS在仅此表单上的最后两个标签之后添加：：

安全问题
您的答案

我应该在这里提供一些背景信息。有问题的两个标签是从WordPress插件注入到表单中的。所以我不能添加课程。根据提供的答案，我可以使用其他CSS样式来减少50％的工作量：

.bbp-login-form fieldset p label:after {
  content: ':';
}

这会将冒号添加到第一个标签，但第二个标签则更成问题。查看代码：

<label>Your Answer<br>
       <input type="text" name="seq_ans[]" id="seq_ans[]" value="" class="input">
</label>

看到了吗？我们需要为此标签在:之前插入<br>，但看不到可以这样做。此刻，使用上面的代码片段，我在输入框后得到了冒号。

更新

由于label位于p内部，因此我必须对第一个标签使用以下样式：

.bbp-login-form p label:nth-child(1)::after {
  content: ':';
}

这样一个人就可以工作了。

更新

根据提供的评论，我添加了此进一步起作用的CSS：

.bbp-login-form p label:nth-child(2) {
  font-size: 0;
}

.bbp-login-form p label:nth-child(2)::before {
  font-size: 16px;
  content: "Your answer:";
}

副作用是最后一个input框的高度现在较小。

最终CSS

.bbp-login-form p label:nth-child(1)::after {
   content: ':'
}

.bbp-login-form p label:nth-child(2) {
  font-size: 0;
}

.bbp-login-form p label:nth-child(2)::before {
  font-size: 16px;
  content: "Your answer:";
}

.bbp-login-form p input {
    font-size: 12px !important;
}

您可以使用::after并将content设置为冒号。

.with-colon::after {
  content: ':';
}

<label class="with-colon">My Label</label>

由于您无法将类别添加到标签，因此有两种选择：

检查注入的标记，看看它是否具有可以定位的类名。
使用:nth-child选择器将页面上的第三和第四标签定位为目标，

.bbp-login-form label:nth-child(3):after,.bbp-login-form label:nth-child(4):after {
   content: ':'
}

或者您可以从其他标签中删除冒号，然后仅将以下所有标签作为目标：

.bbp-login-form label::after {
   content: ':'
}

您可以将CSS用于安全性问题标签

.bbp-email + p > label:after {
    content: " :";
}

您可以使用JS作为答案标签

 jQuery(document).ready(function($){
$('.bbp-email + p + p > label').html('<label>Your Answer:<br><input type="text" name="seq_ans[]" id="seq_ans[]" value="" class="input"></label>');

});

或者您可以将js直接添加到您的functions.php

function add_this_script_footer(){ ?> 
<script type="text/javascript"> 
jQuery(document).ready(function($){ 
$('.bbp-email + p + p > label').html('<label>Your Answer:<br><input type="text" name="seq_ans[]" id="seq_ans[]" value="" class="input"></label>'); }); 
</script> 
<?php } 
add_action('wp_footer','add_this_script_footer'); ?>

在这两个标签的末尾添加冒号

更新

更新

最终CSS

GuGeAD 回答：在这两个标签的末尾添加冒号

在这两个标签的末尾添加冒号

更新

更新

最终CSS

GuGeAD 回答：在这两个标签的末尾添加冒号

大家都在问