content not working on safari

HTML

<select id="cars" multiple>
  <optgroup label="Swedish Cars" data-label='Swedish Cars'>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

<span label='I am span content'></span>

CSS

span {
  display: inline-block;
  vertical-align:top;
}
select {
	height: 200px
}
optgroup {
  visibility: hidden;
}
option {
  visibility: visible;
}
optgroup:before {
  content: attr(label);
  visibility: visible;
}
span:before {
  content: attr(label);
}