Css custom list-style with not aligned vertical position and list-style-type curved arrow

I have html structure like this:

<div class="details">
 <p class="title">Title</p>
  <ul>
   <li> Test 1 </li>
   <li> Test 2 </li>
   <li> Test 3 </li>
   <li> Test 4 </li>
   <li> Test 5 </li>
   <li> Test 6 </li>
  </ul>
</div>

i want to make the list-style not vertical aligned and the title will be in the middle pointing to each list roughly like this:

is there anyway to style it like the image above and keep it responsive?