Как выровнять список относительно изображения?

Question

[weranda]

Приветствую
Пример на CodePen.

У элементов списка есть псевдокласс :before, задающий стиль списка — длинное тире. Это тире налезает на изображение. Как можно сделать так, чтобы :before обтекал изображения корректно — без "залезание" на изображение?
Желательна поддержка IE9, так что...надеюсь на ваш совет.

Comments

[dollar]

Это баг браузера. Не используйте списки вместе с обтеканием.

Answer 1

[narkesss]

А если замаскировать и сделать релатив бокс изображения и зиндексом перекрыть.Полностью проблему не решит , ну хоть что то

Comments

[weranda]

Можете привести пример? Не пойму.

[narkesss]

блок с изображением ему даете position: relative;
z-index: 99;

before
z-index: 88
блок с избражением будет над чертачками

[weranda]

narkesss, теперь понял — не вариант! Тогда тире исчезает за изображением, а надо чтобы тире было слева от текста (сразу перед ним) и список вместе с тире обтекал изображение.

[narkesss]

weranda, Бей на два списка а иначе хз как

[Andrej Sharapov]

img{
	float: left;
	margin: 0 35px 0 0;
	display: block;
}

и

ul li:before {
	content: '—';
	position: absolute;
	margin-left: -25px;
}

Answer 2

[Максим]

Только если так ... https://codepen.io/anon/pen/KxRGeW?editors=1100
других способов может и не быть

Answer 3

[Ankhena]

Вот так https://codepen.io/anon/pen/eLKYBj

Comments

[Ankhena]

Желательна поддержка IE9

варианты для ИЕ9
- оставить как есть и полоска будет отодвигать только первую полосу
- заменить псевдоэлемент на list-style-image в который инлайново сложить svg
- заменить flex на table
ну или еще что-нибудь типа префиксов с полифилами