CODEWITHSUNDEEP
htmlcsshtml-listspseudo-element
jublikon
jublikon

Reputation: 3447

Change bullet icon to double quote

I have a List in HTML. Now I would like to change the bullet icon to a double quote icon.

I have found that interesting website.

So I have the code as below: 

.listStyle li:before {
  list-style: none;
  content: "\00BB";
}
<ul class="listStyle">
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
</ul>

The Screenshot looks like that:

HTML list with bullets and double quotes

Instead of the bullet icon I need the double quote icon. Not both next to each other.

How can I achieve this?

What I need to avoid is that the line is in the same vertical line when a line break is needed: enter image description here

Upvotes: 1

Views: 274

Answers (3)

web-tiki
web-tiki

Reputation: 103750

you are applying the list-style property on the pseudo elements rather than on the li elements. For the double quote alignment, you can use absolute positioning with : 

.listStyle {
  list-style: none;
  padding-left:1.5em;
}
.listStyle li{
  position:relative;
}
.listStyle li:before {
  content: "\00BB";
  position:absolute;
  right:100%;
  width:1.5em;
  text-align:center;
}
<ul class="listStyle">
  <li>SOME TEXT<br/>second line</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
  <li>SOME TEXT</li>
</ul>

Upvotes: 4

Jameal G
Jameal G

Reputation: 434

This will prevent new lines from wrapping underneath the bullet:

.listStyle li {
    list-style: none;
}
.listStyle li:before {
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  content: "\00BB";
}

Upvotes: 0

Rev Nosky
Rev Nosky

Reputation: 75

You can change the bullet by doing the following:

ul {
  list-style: none;
  padding-left:0px;
}
ul li:before {
  content: "\00BB";
}
<ul>
  <li>text</li>
  <li>text</li>
</ul>

The padding-left:0px; will remove the padding to the left so it doesn't have an indent anymore.

Upvotes: 1

Related Questions