Добавьте двоеточие в конце этих двух меток

Question

Вот код формы:

<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/

Моя настоящая страница здесь .

Отображается форма:

Возможно ли с помощью 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 теперь меньше по высоте.

Final 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;
}

Answer 1

Вы можете использовать ::after и установить для content двоеточие.

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

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

Поскольку у вас нет возможности добавить класс к меткам, у вас есть пара вариантов:

1. Проверьтевставьте разметку и посмотрите, есть ли у нее имя класса, на которое вы можете ориентироваться.
2. Используйте селектор :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: ':'
}

Answer 2

Вы можете использовать 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'); ?>