jquery - 基于 :after content 的定位元素

Question

我正在使用 :after 伪元素的 content 参数来显示一组单选按钮的文本。然而，这导致一切重叠。

我想找到一种方法来添加一些填充或使用 :after 内容的边距，但不确定是否可行。

有没有办法根据前一个元素的 :after 伪元素的 content 参数来定位某些东西？

fiddle :https://jsfiddle.net/9y959azg/

HTML

<form id="ValidateForm">
<label for="AgentId">Agent Id</label>
<input id="AgentId" name="AgentId" type="text" >
<label for="LOB">LOB</label>
<input id="Retirement" name="LOB" type="radio" value="R"> 
<input id="Life" name="LOB" type="radio" value="L"> 
<input id="Business" name="LOB" type="radio" value="B">     
<label for="SignDate">Application Sign Date</label>
<input data-val="true" data-val-date="The field Application Sign Date must be a date." id="SignDate" name="SignDate" type="text" value="">
<input type="button" value="Go">
</form>

CSS

    #ValidateForm{
        margin: 10px 10px 5px 0;
    }

    #ValidateForm label{
        font-weight: bold;
        float:left;
        clear:left;
        min-width:250px;
        margin:inherit; 
    }

    #ValidateForm label.required:after {
      content:"*";
      color:red;
    }

    #ValidateForm input{
        float:left;
        margin: inherit;
    }

    #ValidateForm .submission-attempted input:invalid { 
        background-color: #f9b2b2; 
        outline: none; 
    }

    #ValidateForm input[type=button]{
        clear:left;
    }

    #ValidateForm input[type=radio]:after {
        margin: 0 20px 0;
    }

    #ValidateForm input#Retirement:after {
        content:"Retirement";
    }

    #ValidateForm input#Life:after {
        content:"Life";
    }

    #ValidateForm input#Business:after {
        content:"Business";
    }

Answer 1

你需要在input[type=radio]设置宽度

#ValidateForm input[type=radio]{
    width: 80px !important;
}

或

#ValidateForm input[type=radio]{
    margin-right: 80px !important;
}