jQuery在单击时显示psuedo元素

Question

我要在此处执行的操作是，我有一个列表，并且每个列表项都有伪元素:before，最初，伪元素将设置为display:none，但是在单击列表项我想显示放置在该项目之前的伪元素，我该怎么做？

这是我尝试过的。

$('.lab-list li').on('click', function() {
  $(this: before).css({
    "display": "block"
  });
});

.lab-list li {
  list-style: none;
}

.lab-list li:hover {
  cursor: pointer;
}

.lab-list li:before {
  content: "\2708";
  padding-left: 20px;
  padding-right: 20px;
  display: none;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<ul class="lab-list">
  <li>Stockholm</li>
  <li>Delhi</li>
  <li>Zurich</li>
  <li>Newyork</li>
  <li>South hampton</li>
  <li>Manila</li>
  <li>Singapore</li>
</ul>

Answer 1

您可以在元素中添加一个类，以显示伪元素：

    <tr style="width:100%; background-color:#d08702">
        <td style="font-weight:600;color:white;text-align:center">Verified Data</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>

$('.lab-list li').on('click', function() {
  $(this).toggleClass('show-before');
});

.lab-list li {
  list-style: none;
}

.lab-list li:hover {
  cursor: pointer;
}

.lab-list li:before {
  content: "\2708";
  padding-left: 20px;
  padding-right: 20px;
  display: none;
}

/* add this */
.lab-list .show-before:before {
  display:block;
}