Drupal - How to configure CkEditor's styles dropdown?

1. Your Custome style should be present in your CSS file. 2. Your FILTER SETTING should be proper. To check, same way as yours, I just enabled style and and put h1.heading-a|Title(which I took from css/base/elements.css for example purpose) in style dropdown and and it did show up as shown in the second image.

Second Image

Hence, the issue is, to properly put the Class|Key in the Styles dropdown section and make sure that it is available in CSS.

Later to check custom one, I did put h2.myclass {color: red} in elements.css and saved and cleared cache. And as you can see it showed up in following image

UPDATE-1: FILTER SETTING

Now the reason why, Horizontal line and Underline iCon are not visible as you have stated in your comment. For that you need to check the FILTER SETTINGS. Have you played with Limit allow HTML tags and correct faulty HTML list which you can see at the bottom of the basic HTML setting page as shown in following image. If you delete <hr> from the list the icon will not shown up. Just I checked, if I remove <hr> form list the icon also gets disappeared.

And your Enable filter setting should be as shown in following image.

For people on drupal 8.4: there is a bug in CKEditor itself on this manner. See https://www.drupal.org/project/drupal/issues/2911749 for more information and patches.

One possible workaround is to replace the ckeditor.js with that one from > Drupal 8.3.7 (should be version 4.6.2), then everything should work well > again.

In composer.json, add this to your "extra" section. See comment #33 in the link (credit to @ayalon on drupal.org):

"patches": {
  "drupal/core": {
    "Downgrade CkEditor until https://www.drupal.org/node/2911749 is fixed": "https://www.drupal.org/files/issues/fix_ckeditor_styles_dropdown-2911749-17.patch"
  }
}