is it possible to use different list specifier in li tag

Question

I'm using ✈ as list list specifier, it looks nice for my project when it is in single line , but for mobile view (in multiple line of a list) it looks bit ugly . do you have some remedies .. thank you

Actual view :

✈ this is what my problem with li tags
please give me some remedies.
✈ this is what my problem with li tags
please give me some remedies.

Expected view:

✈ This looks awesome to display
     is there anyway to do this.
✈ This looks awesome to display
     is there anyway to do this.

Answer 1

There are couple of different ways to achieve this.

Option 1. CSS Tables

---

ul {
  list-style-type: none;
  display: table;
  width: 200px;
  padding: 0;
}

li {
  display: table-row;
}

li:before {
  content: '✈ ';
  padding-right: 5px;
  display: table-cell;
}

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>

Option 2. absolute and relative positions

---

ul {
  list-style-type: none;
  width: 200px;
  padding: 0;
}

li {
  position: relative;
  margin-left: 25px;
}

li:before {
  content: '✈ ';
  position: absolute;
  left: -20px;
}

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>

Option 3. Flexbox

---

ul {
  list-style-type: none;
  width: 200px;
  padding: 0;
}

li {
  display: flex;
}

li:before {
  content: '✈ ';
  margin-right: 5px;
}

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>