Question

这是我的第一个问题，所以我希望我正确提出。

Matthew Cain使用html和css创建了一个精美的单选按钮示例，可以在https://www.templatemonster.com/blog/style-checkboxes-radio-buttons-css/上看到。他在其中使用以下代码：

body {
  margin: 0;
  padding: 0;
  font-family: 'PT Sans', sans-serif;
  font-size: 1.3em;
  font-weight: bold;
  color: #fff;
}

#first {
  background-color: #4B4D65;
}

#second {
  background-color: #FF8A66;
}

.section {
  padding: 100px;
  padding-left: 150px;
}

.section input[type="radio"],
.section input[type="checkbox"]{
  display: none;
}

.container {
  margin-bottom: 10px;
}

.container label {
  position: relative;
}


/* Base styles for spans */
.container span::before,
.container span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

/* Radio buttons */
.container span.radio:hover {
  cursor: pointer;
}

.container span.radio::before {
  left: -52px;
  width: 45px;
  height: 25px;
  background-color: #A8AAC1;
  border-radius: 50px;
}

.container span.radio::after {
  left: -49px;
  width: 17px;
  height: 17px;
  border-radius: 10px;
  background-color: #6C788A;
  transition: left .25s, background-color .25s;
}

input[type="radio"]:checked + label span.radio::after {
  left: -27px;
  background-color: #EBFF43;
}

<section id="first" class="section">
    <div class="container">
      <input type="radio" name="group1" id="radio-1">
      <label for="radio-1"><span class="radio">Coffee</span></label>
    </div>
    <div class="container">
      <input type="radio" name="group1" id="radio-2">
      <label for="radio-2"><span class="radio">Tea</span></label>
    </div>
    <div class="container">
      <input type="radio" name="group1" id="radio-3">
      <label for="radio-3"><span class="radio">Cappuccino</span></label>
    </div>
</section>

在Chrome中调试时，我看到了

<span class="radio"> == $0
 ::before
 "Coffee"
 ::after
</span"

这是我的HTML：

<body class="my_PageBg" data-usepopupcontrols="no">
<div class="my_DesktopContainer my_temp_unselect" style="display: none;">
<div tabindex="1" class="container" 
id="radio1" style="transform-origin: center 50%; left: 20px; top: 40px;     width: 660px; height: 100px; 
overflow: auto; position: absolute; z-index: 1; direction: ltr; transform:         inherit; transform-style: preserve-3d;" 
contenteditable="false">
<tbody>
<tr>
<td style="padding: 0px; white-space: nowrap;">
<label style="cursor: default;" onkeydown="onTreeLabelKeyDown(event)"     for="radio10" name="radio1">
<input name="radio1" tabindex="1" id="radio10"     onclick='OnResetDownChainControls("radio1",event)' type="radio" checked=""     value="Value1"/>
Val1
</label>
</td>
</tr>
<tr>
<td style="padding: 0px; white-space: nowrap;">
<label style="cursor: default;" onkeydown="onTreeLabelKeyDown(event)"     for="radio11" name="radio1">
<input name="radio1" tabindex="1" id="radio11"     onclick='OnResetDownChainControls("radio1",event)' type="radio" value="Value2"/>
Val2
</label>
</td>
</tr>
<tr>
<td style="padding: 0px; white-space: nowrap;"><label style="cursor:     default;" onkeydown="onTreeLabelKeyDown(event)" for="radio12" name="radio1">
<input name="radio1" tabindex="1" id="radio12"     onclick='OnResetDownChainControls("radio1",event)' type="radio" value="Value3"/>
    Val3
</label>
</td>
</tr>
</tbody>

我正在尝试对文本“ Val1”，“ Val2”，“等”进行同样的操作。

请注意，我无法更改html，因为它来自外部呼叫。

我可以使用哪个CSS选择器？

Answer 1

::after和::before伪元素不适用于replaced-elements或void-elements。

但是您可以使用<span>来达到所需的效果。示例：

.my-special-class:before {
  content: '[before] ';
}
.my-special-class:after {
  content: ' [after]';
}
.my-special-class:before,
.my-special-class:after {
  color: red;
}

<span class="my-special-class">Val 1</span>

很显然，您可以将类命名为所需的名称，并相应地更改选择器。

注意：如果您想使用伪元素作为图形（为它们提供大小，请position，background-image，border，{{1} }等–没有实际的background），您必须仍指定content（空字符串）。如果不设置content: ''，则无论content，display还是visibility，伪元素都不会呈现。
可以应用于普通DOM元素的大多数CSS属性都可以应用于pseudo-elements。

opacity可以具有伪值，但这意味着<label>被放置在:before中，而<input>则包含在<label>中。如果要将:before放在<input>后面（不能带有伪值），则必须将文本节点包装在<span>中，如示例所示。

还要注意，即使规范正式使用双冒号表示法（::pseudo-element定义了伪元素，所有支持双冒号表示法的浏览器也都支持旧的单冒号表示法，而一些旧版本（IE pre v9），FF pre v1.5，Opera pre v7）仅支持单冒号表示法。因此，大多数人使用单冒号表示法（这是正式的，是错误的，但至少从目前来看在技术上是正确的）。

css选择器，用于标签内的文本以及前后使用

1 个答案: