This gives you that beautiful green lock in Chrome. I'm assuming you're putting your SSL documents in /etc/apache2/ssl, but you can put them anywhere and replace the references in the following commands. Tested successfully on Mac OS Sierra and High Sierra.

sudo nano /etc/apache2/ssl/localhost.conf

Content:

[req]
default_bits = 1024
distinguished_name = req_distinguished_name
req_extensions = v3_req

[req_distinguished_name]

[v3_req]
basicConstraints = CA:FALSE
keyUsage = nonRepudiation, digitalSignature, keyEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost

Run these commands:

sudo openssl genrsa -out /etc/apache2/ssl/localhost.key 2048
sudo openssl rsa -in /etc/apache2/ssl/localhost.key -out /etc/apache2/ssl/localhost.key.rsa
sudo openssl req -new -key /etc/apache2/ssl/localhost.key.rsa -subj /CN=localhost -out /etc/apache2/ssl/localhost.csr -config /etc/apache2/ssl/localhost.conf
sudo openssl x509 -req -extensions v3_req -days 3650 -in /etc/apache2/ssl/localhost.csr -signkey /etc/apache2/ssl/localhost.key.rsa -out /etc/apache2/ssl/localhost.crt -extfile /etc/apache2/ssl/localhost.conf
sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain /etc/apache2/ssl/localhost.crt

Restart Apache: sudo apachectl restart

Done.

The whole reason I got into this was to get browserSync to work over HTTPS. This will allow you to use browserSync in your gulpfile.js with the following added browserSync command:

browserSync.init({
  https: {
    key: "/etc/apache2/ssl/localhost.key",
    cert: "/etc/apache2/ssl/localhost.crt"
  },
});