If you set the position:relative property to the parent element (li in this case), you can then change the position:relative to position:absolute in li:before (the child element) to allow the arrow to be positioned wherever necessary.
Referenced from MDN
Absolute
This does not reserve space for the element but instead positions it at a specified location relative to its nearest positioned ancestor or the containing block. Absolutely positioned elements can have margins and do not collapse with other margins.
One thing to note is that you were utilizing content:\39, resulting in 9. To achieve the double arrow effect, use content:\bb instead.
/*demo styles - width is to force break line*/
*, *:before, *:after {
box-sizing:border-box
}
.arrow-list {
width: 260px;
border: 1px dashed red;
margin: 0;
padding: 0
}
/*end demo styles*/
.arrow-list li {
color: #0054a6;
margin: 0 0 4px 0;
display: block;
position: relative;
left:0%;
padding: 2% 0 2% 7% /*demo styles */
}
.arrow-list li:before {
font-family: 'ElegantIcons';
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
content: "\bb";
-webkit-font-smoothing: antialiased;
color: #0054a6;
font-size: 18px;
/* display: inline-block; not needed */
position: absolute;
top: 4px;
left: 2%
}
<ul class="arrow-list">
<li>Clear and consistent brand identity</li>
<li>+47.08% Increase in website registrations</li>
</ul>