Itens de lista contornando imagem - edsonjunior.com

Itens de lista com `list-style-type`

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras luctus, nulla eget pharetra venenatis.
Donec quis orci eros.
Quisque ipsum est, faucibus vitae rhoncus in, aliquet vel nisl.
In sed libero at magna rhoncus feugiat at ut nisi.
Proin vitae ligula arcu, non semper est.
Nulla nec vulputate dolor.
Nullam non lacus massa.

Certo: Os quadrinhos e o texto contornam a imagem.

ul { list-style-type:square; list-style-position:inside; }

Itens de lista com `background`

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras luctus, nulla eget pharetra venenatis.
Donec quis orci eros.
Quisque ipsum est, faucibus vitae rhoncus in, aliquet vel nisl.
In sed libero at magna rhoncus feugiat at ut nisi.
Proin vitae ligula arcu, non semper est.
Nulla nec vulputate dolor.
Nullam non lacus massa.

Errado: Agora a setinha é um background e, por estar alinhado a esquerda, não contorna a imagem, além de ficar por trás dela.

ul { list-style-type:none; }
ul li { background:url(setinha.png) no-repeat left center; padding-left:1em; }

Itens de lista com `background`

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras luctus, nulla eget pharetra venenatis.
Donec quis orci eros.
Quisque ipsum est, faucibus vitae rhoncus in, aliquet vel nisl.
In sed libero at magna rhoncus feugiat at ut nisi.
Proin vitae ligula arcu, non semper est.
Nulla nec vulputate dolor.
Nullam non lacus massa.

Errado: Aplicando position:relative à lista força as setinhas apareceram por sobre a imagem, mas ainda não a contornam.

ul { list-style-type:none; position:relative; }

Itens de lista com `background`

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras luctus, nulla eget pharetra venenatis.
Donec quis orci eros.
Quisque ipsum est, faucibus vitae rhoncus in, aliquet vel nisl.
In sed libero at magna rhoncus feugiat at ut nisi.
Proin vitae ligula arcu, non semper est.
Nulla nec vulputate dolor.
Nullam non lacus massa.

Certo: Agora as setinhas acompanham o texto e não ficam sobre a imagem, porém não a contorna.

ul { list-style-type:none; display:table; float:left; margin:0 0 1em -2.5em; }
p { clear:both; }