CODEWITHSUNDEEP
htmlcss
unkind_sauce1
unkind_sauce1

Reputation: 538

How to position li::before 'outside'

I want to align an li::before psuedo element as if I was doing a

list-style-position: outside

ul{
  width: 300px;
}

.cool-list li{
list-style: none;
}

.cool-list li:before{
content:"\2716";
color: #000;
}
<ul class="cool-list">
<li> item</li>
<li> One 'problem' with the Guardian's method <span style="background-color: yellow">is list items</span>  </li>
<li> Item </li>
<li> Item </li>
</ul>

I want to align the highlighted part.

Upvotes: 3

Views: 1175

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106008

You may use list-style instead a pseudo and the pseuddo ::marker to reset the color :

ul{
  width: 300px;
}

.cool-list li{
list-style: "\2716\0020"; /* add a white space ? */
}

li::marker {
  color: crimson; /* give a different color to the list marker ? */ 
}
.cool-list li.good {
list-style:"\2714\0020";
}
li.good::marker {
  color: green
}
<ul class="cool-list">
<li> item</li>
<li> One 'problem' with the Guardian's method <span style="background-color: yellow">is list items</span>  </li>
<li class="good"> Item </li>
<li> Item </li>
</ul>

Upvotes: 1

doğukan
doğukan

Reputation: 27471

A negative margin can do this.

ul {
  width: 300px;
}

.cool-list li {
  list-style: none;
}

.cool-list li:before {
  content: "\2716";
  color: #000;
  margin-left: -20px;
}
<ul class="cool-list">
  <li> item</li>
  <li> One 'problem' with the Guardian's method <span style="background-color: yellow">is list items</span> </li>
  <li> Item </li>
  <li> Item </li>
</ul>

Upvotes: 2

Related Questions