In my creative list-making process, I have devised a method using CSS to visually enhance the elements. For the first and middle li items in the list, I add a +, while for the final element, I replace it with an =.
I envisioned this structure:
1 + 2 + 3 = Result
However, what I ended up with was: 1 + 2 + 3 + Result
Take a look at my code snippet below:
.list-look{
padding-left: 0;
overflow: hidden;
}
ul li{
list-style: none;
}
.list-look li.itemsLook{
padding-right: 10px;
display: inline-block;
float: left;
width: 270px;
position: relative;
list-style: none;
}
ul li.itemsLook:not(:last-child)::before{
speak: none;
font-style: normal;
font-weight: 900;
font-variant: normal;
text-transform: none;
content: "+";
float: right;
font-size: 35px;
width: 10px;
top: 25%;
right: 15px;
}
ul li.itemsLook:last-child::before{
content: "=";
float: right;
top: 25%;
}<ul class="list-look">
<li class="itemsLook">1</li>
<li class="itemsLook">2</li>
<li class="itemsLook">3</li>
<div>
Result
</div>
</ul>