I'm a bit confused by the multiple :before and :after blocks here.  Did it have to be done that way ?
(N.B. I'm no expert myself) ?
I also uncovered a suggestion that this may upset Internet Explorer
  -- http://stackoverflow.com/questions/11998593/can-i-have-multiple-before-for-the-same-element

It does seem to display "more or less ok" in IE8
 (-- once I'd removed the thing referred to below ... https://github.com/SciTools/iris/pull/1017/files#r9593259 )
but... there is no horizontal line, which is presumably generated by the 'border' setting, so possibly this is correct + IE8 does not recognise the multiple rules.

N.B. I tried simply combining them, but it isn't working properly for me : In Firefox I now get a line only to the *right* of the text, and in IE8 I still get no horizontal line at all :frowning: