自定义单选按钮，第一行和第二行之间有间隙

Question

我正在创建一个可以处理长文本的自定义单选按钮。通常文本会放在圆圈下方，但我已经修复了它。我现在要处理的问题是，文本的第一行和第二行之间存在差距。

这是由于:before具有高度而造成的。有谁知道解决这个问题的方法？

JSFIDDLE 示例

.HTML：

<span class="radiobuttons-item"><input id="id656" type="radio" name="id653" value="id656"><label for="id656">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum suscipit tellus, at tristique nunc. Vestibulum nulla purus. onsectetur adipiscing elit. Sed bibendum suscipit tellus, at tristique nunc. Vestibulum nulla purus Vestibulum nulla purus. onsectetur adipiscing elit. Sed bibendum suscipit tellus, at tristique nunc. Vestibulum nulla purus</label></span>

.CSS：

body{
background-color: #86C8BC;
}
.radiobuttons-item input[type='radio'] {
display: none;
}
.radiobuttons-item {
display: block;
margin-top: 30px;
margin-bottom: 15px;
}
.radiobuttons-item input[type='radio'] + label {
position: relative;
line-height: 1em;
cursor: pointer;
width: 80%;
display: block;
margin-left: 50px;
}
.radiobuttons-item input[type='radio'] + label:before {
content: '';
width: 16px;
height: 16px;
border-radius: 100%;
margin-right: 18px;
display: inline-block;
background: #fff;
vertical-align: middle;
box-shadow: 0 0 0 0.1em white, 0 0 0 0.2em #54585A;
border: 6px solid #fff;
margin-left: -55px;
margin-bottom: 5px;
padding: 5px;
}
.radiobuttons-item input[type='radio']:checked + label:before {
background: #008C8F;
}

Answer 1

更新了 css 代码：

body{
background-color: #86C8BC;
}
.radiobuttons-item input[type='radio'] {
display: none;
}
.radiobuttons-item {
display: block;
margin-top: 30px;
margin-bottom: 15px;
}
.radiobuttons-item input[type='radio'] + label {
position: relative;
line-height: 1em;
cursor: pointer;
width: 80%;
display: block;
margin-left: 50px;
}
.radiobuttons-item input[type='radio'] + label:before {
position:absolute;
content: '';
width: 16px;
height: 16px;
border-radius: 100%;
margin-right: 18px;
display: inline-block;
background: #fff;
vertical-align: middle;
box-shadow: 0 0 0 0.1em white, 0 0 0 0.2em #54585A;
border: 6px solid #fff;
margin-left: -55px;
margin-bottom: 5px;
padding: 5px;
}
.radiobuttons-item input[type='radio']:checked + label:before {
background: #008C8F;
}