[FIXED] How to click on ::before element

Issue

I have to close the this dialog box

The HTML Code of the same is

How to deal with it. There is no other option to close the dialog box. I have tried locating element via css selector but that dint help.

Edit CSS of ngdialog-close:before

.ngdialog.ngdialog-theme-default .ngdialog-close:before {
  background: transparent;
  border-radius: 3px;
  color: #bbb;
  content: '\00D7';
  font-size: 26px;
  font-weight: 400;
  height: 30px;
  line-height: 26px;
  position: absolute;
  right: 3px;
  text-align: center;
  top: 3px;
  width: 30px;
}

Solution

You can't click the ::before as it is not an element, it's probably content (If it is an element than someone used bad practices behind the scenes). Chrome displays it as ::before for debugging purposes. So I think it could be one of these:

1. Either your close button isn't a button but an icon or a gif etc...
2. You're missing the actual button which could be the div but it requires a hover before the click for example or it's a parent element to your div.
3. Your button isn't working... (does it work manually?)

If it turns out it is an element, then you can click it with Chrome dev tools opened and see what the Styles tab is showing, for example:

div::before {
  content: url(some.gif);
} 

Perhaps it will show you the HTML code that's being added.

Answered By - Moshisho