Is there away to make the text wrap away from the bullet, like using list-style-position: outside
but using my custom pseudo-element bullet instead?
div {
width: 250px
}
ul {
padding: 10px;
list-style: none;
}
ul>li::before {
padding-right: 10px;
position: relative;
top: 5px;
font-size: 2em;
content: "\2022";
color: #fee100;
}
<div>
<ul>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>VLorem Ipsum is simply dummy text of the printing.</li>
</ul>
</div>
You can use absolute position instead of relative with negative values:
div {
width: 250px
}
ul {
padding: 10px;
list-style: none;
}
ul>li {
position:relative;
}
ul>li::before {
padding-right: 10px;
position: absolute;
left:-15px;
top:-10px;
font-size: 2em;
content: "\2022";
color: #fee100;
}
<div>
<ul>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>VLorem Ipsum is simply dummy text of the printing.</li>
</ul>
</div>