How can i use :after in CSS onClick event

Question

function mutevideo(evt) {
  if (evt.target.classList.contains('fa-video-camera')) {
    evt.target.classList.remove('fa-video-camera')
    evt.target.classList.add('fa-video-camera:after') // need here above fontawesom class with slash
  } else {
    evt.target.classList.remove('fa-video-camera:after') // need here above fontawesom class with slash
    evt.target.classList.add('fa-video-camera')
  }
}

.fa-video-camera:after {
  position: absolute;
  content: "/";
  color: white;
  font-weight: 900;
  font-size: 20px;
  left: 10px;
  top: 7px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<p class="bg-white text-danger rounded-circle"><i onClick=mutevideo(evt) class="fa fa-video-camera p-2 fa-1x"></i></p>

Problem:-

In fontawesome 4.7 version it don't have slash video as it have in version of 5.x, so here i wrote my own css with :after to make this achieve, Now how where i will get video slash as soon as page loads, but my requirement is i need slash on icon after i click.

Note:-

here i'm using fontawesome version 4.7, any help or suggestion are heartily thank you

You can NOT access :after like this in JS as its not part of the DOM so it will not able accessible. — Always Helping
– Always Helping, Commented Jul 25, 2020 at 13:41
hi @AlwaysHelping, thank you for your suggestion, can you please show me how can i achieve this. — unique
– unique, Commented Jul 25, 2020 at 13:43
:after (or ::after) in CSS refers to adding content after an element; it's not part of the class name, and has nothing to do with "after it's been clicked". — IMSoP
– IMSoP, Commented Jul 25, 2020 at 13:44
Also note that although you say "the above code works fine", clicking "Run Snippet" actually results in an error. Please edit to make sure you have a minimal reproducible example, along with a clear explanation of what you are trying to achieve. — IMSoP
– IMSoP, Commented Jul 25, 2020 at 13:47

Always Helping · Accepted Answer · 2020-07-25 13:57:03Z

3

You can simply use a custom class .stop to add a slash in your font-awesome icon on click. There is no need to add another icon to add a slash.

To show and hide on click we can simply use toggle() function instead of doing alot of if's and else or add or remove classes

Run snippet below.

function mutevideo(evt) {
  if (evt.classList.contains('fa-video-camera')) {
    evt.classList.toggle('stop')
  }
}

.stop:after {
  position: absolute;
  content: "/";
  color: white;
  font-weight: bold;
  font-size: 23px;
  left: 11px;
  top: 12px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<p class="bg-white rounded-circle"><i onClick=mutevideo(this) class="fa fa-video-camera p-2 fa-1x"></i></p>

answered Jul 25, 2020 at 13:57

Always Helping

14.6k4 gold badges16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

unique Over a year ago

thank you @alwayshelping, this saved my day, i was trying this from past 5 hrs.

Collectives™ on Stack Overflow

How can i use :after in CSS onClick event

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related