Hachim AlaOui Hachim AlaOui - 3 months ago 9
CSS Question

Looking for help for a list's css (ul li)

I'm looking for help for my css code to make a list looking something like the below with an image in the center (the blue circle).

image

I never done something like this, so i don't have any idea to how i can code it that's why i came here. Thank you in advance !

Answer

I would recommend checking for compatibility issues, but you can achieve something similar if you abandon your <ul> (at least I could not get a list to function properly) and can use shape-outside

.wrapper .circle {
  float: left;
  border-radius: 50%;
  -webkit-shape-outside:circle();
  shape-outside:circle();
  margin-right: 25px;
}

.wrapper .circle-list p {
  margin: 6px 0;
}
.wrapper .circle-list p:before {
  content: "\2022\A0";
}
<div class="wrapper">
  <img src="http://placehold.it/150x150/" class="circle" />
  
  <div class="circle-list">
    <p>This is a line of text</p>
    <p>This is also a line of text</p>
    <p>Oh my God the lines they won't stop!</p>
    <p>Run you fool!  They are coming!</p>
    <p>It's too late!  They know where you are!</p>
  </div>
</div>

Essentially we just use the .circle-list element to replicate list-style behavior with the :before pseudo-class to insert a bullet and space. Other than that it's making use of shape-outside to create a simple circular wrapper.