jquery show psuedo element on click

Question

What i am trying to do here is that i have a list, and each list item has the pseudo element :before, initially the pseudo element will be set to display:none, but when clicked on the list item i want to display the pseudo element placed before that item, how can i do this?

This what i have tried.

$('.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>

Pseudo-elements are not selectable by JS as they are not in the DOM. Apply a class to the pseudo-parent and use CSS. — Paulie_D, Nov 28 '18 at 12:01
Check https://stackoverflow.com/questions/38872290/how-to-get-pseudo-element — Mohit Agarwal, Nov 28 '18 at 12:01
Also - https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin — Paulie_D, Nov 28 '18 at 12:03

score 1 · Accepted Answer · answered Nov 28 '18 at 12:14

You could add a class to the element to make the pseudo element show:

$('.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.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>

jquery show psuedo element on click

1 Answers1