如何覆盖单选按钮标签上的伪类之前和之后

Question

在将输入添加到标签后，我试图正确对齐单选按钮。输入将文本按下，但单选按钮保持按下状态，从而导致未对齐，如您在此屏幕截图中所见。

这是我的HTML

  <table class=standardform style='margin-top:20px'>
  <tr><td><input type=radio name=newbookingdatetype value='date' class=newbookingdatetype id=newbookingdatetype-date checked>&nbsp;<label for=newbookingdatetype-date>One Time</label></td></tr>
  <tr><td><input type=radio name=newbookingdatetype value='weekday' class=newbookingdatetype id=newbookingdatetype-recurring>&nbsp;<label for=newbookingdatetype-recurring id=recurringlabel>Recurring every <input type=number id=newbookingrecurringweeks value='6' class=integer style='width:50px;text-align:center' disabled> weeks</label></td></tr>
  </table>

单选按钮显然不是本机按钮，而是使用一些带有伪类前后伪样式的css渲染的。因此，为了弥补这一点，我尝试操纵label元素的before和after。

我为第二个单选按钮的标签赋予了ID，并添加了以下CSS

<style type=text/css>

#recurringlabel:before{top:5px};
#recurringlabel:after{top:8px};

</style>

“之前”的默认值是top：0px，“之后”的默认值是top：3px，所以我基本上只是想将整个内容降低5个像素。

在Chrome开发人员工具中，如果我更改了这些值，则它会正确排列，但在现实生活中，只有第一个规则才会生效。因此，before类将top属性设置为5px，而after类则完全忽略top：8px。

现在，当未选中它时，它看起来像这样

但是选中后就像这样

如果我像这样反转样式设置...

<style type=text/css>

#recurringlabel:after{top:8px};
#recurringlabel:before{top:5px};

</style>

然后只有“之后”设置生效，但“之前”设置将被忽略。

换句话说，第二个设置总是被忽略。这是为什么？还有一种更好的方法让我完成在这里要做的事情吗？

Answer 1

您的分号放错了位置：

<style type=text/css>

#recurringlabel:after{top:8px};
#recurringlabel:before{top:5px};

</style>

应该（添加了一些其他好的格式，使这些问题更容易发现）

<style type=text/css>

#recurringlabel:after{
   top:8px;
}
#recurringlabel:before{
   top:5px;
}

</style>

另一方面，如果按钮使用/可以使其本身或它的父对象使用display: inline-block;，则可以使用vertical-align获得所需的内容。