[SLOVED] Mdash ignored by Safari

Hi does anyone know how to display mdash on a list item in Safari? I have tried almost everything but it doesn’t work for me. I other browsers it works just fine only Safari cause problem. any hack to make it work?

1 Like

ok, now I had time to look back to this issue. There is no way (i didn’t find any source) make it happenedwith list-style-type. So I have found easy way to use ::before.

ul{
list-style-type: none;
}

ul li:before {
  content: '\2014';
  position: absolute;
  margin-left: -20px;
}

There was was another problem, actually two. Usual use for ::before position is inline-block but this caused wrapping text under this dash.

CleanShot 2020-10-30 at 12.58.47

So I have used position:absolute with negative margin to make space. That solved first problem.

CleanShot 2020-10-30 at 13.00.07

Second problem was that this list is in a container that is animated to 0px to show only title of this content. But because of absolute position these dashes were visible when container was collapsed to 0px. Again there is an easy solution to make a text-block element set to position relative.

Now mdsah is correctly rendered in all browser and is hidden when container is collapsed.

I don’t know why I didn’t make it this way in first place and hope that someone will find it helpul.