How do I style this <li> so that the second line of the sentence starts just below the start of it, rather than below the bullet?
My question is, how can I make the second li line to start right below the beginning of the sentence and not below the arrow?
<ul class="arrow-list">
<li>Clear and consistent brand identity</li>
<li>+47.08% Increase in website registrations</li>
</ul>
.arrow-list li {
color: #0054a6;
margin-bottom: 4px;
display: block;
}
.arrow-list li:before {
font-family: 'ElegantIcons';
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
content: "\39";
color: #0054a6;
font-size: 18px;
display: inline-block;
margin-right: 18px;
position: relative;
top: 4px;
}
source to share
you can give position:relative
in li
(parent in this case) and then replace position:relative
with position:absolute
with li:before
(which is child) so that the arrow can move anyway.
From MDN
Absolute
Leave no space for the item. Instead, position it at the specified position relative to its nearest located ancestor or containing block. Absolutely positioned boxes can have margins, they are not destroyed with any other margins.
Anyway, you have used content:\39
which results in 9
if you want to achieve double arrow then you should usecontent:\bb
/*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>
source to share