Answer to Stack Overflow question: http://stackoverflow.com/questions/37831200/how-to-design-a-yaxis-plotline-with-our-own-css

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {

  var chart = $('#container').highcharts({
    title: {
      text: 'Monthly Average Temperature',
      x: -20 //center
    },
    subtitle: {
      text: 'Source: WorldClimate.com',
      x: -20
    },
    
    plotOptions: {
      series: {
        point: {
          events: {
              mouseOver: function () {
                var chart = this.series.chart;
                // update both ends of the scatter line
                chart.series[1].data[0].update([0,this.y]);
                chart.series[1].data[1].update([11,this.y]);
              }
          }
        }
      }
    },

    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                   'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
      title: {
        text: 'Temperature (°C)'
      },
      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080',
        id: 'hori_line'
      }]
    },
    tooltip: {
      enabled: false
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
    },
    series: [
      {
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
      }, {
        // scatter plot line to serve as moveable plot line
        type: 'scatter', 
        data: [{ 
          x: 10, 
          y: 0, 
          marker: {
            enabled: false						// hide the markers (to show only the line)
          },
          dataLabels: { 
            enabled: false 
          } 
        },{ 
          x: 11, 
          y: 10,  
          marker: {
            enabled: true,
            fillColor: '#248EC6',
            symbol: 'square',
            radius: 14
          },
          dataLabels: {
          
            useHTML: true,
            formatter: function() {
              return '<span style="padding-left: 10px;">' + this.y + '</span>';
            },
          }
        }],
       ...