Change bullet icon to double quote

Question

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:

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:

web-tiki · Accepted Answer · 2015-12-14T15:53:58.047

4

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>

edited Dec 14 '15 at 15:53

answered Dec 14 '15 at 15:31

web-tiki

99,765
32
217
249

Thank you for your help. The problem that I still have is that the text is aligned with the list icons. But the list icons have to be next to the text on the left when a line break is needed. I will update my post to show what I need to avoid – jublikon Dec 14 '15 at 15:35
Adding padding to the `
` and a negative margin to the pseudo element should work

Sam Willis

Dec 14 '15 at 15:43

@jublikon I updated the answer with a solution for the double quote alignement – web-tiki Dec 14 '15 at 15:46

@web-tiki Your answer works great. Thank you. I have one little question left: How can I achieve a space between the text and the icon ? Adding a space before the text is ignored by the browser – jublikon Dec 14 '15 at 15:50

1

@jublikon I added some space to the left with padding on the `ul` element and centered the double quotes with a width on the pseudo element and `text-align:center;` – web-tiki Dec 14 '15 at 15:55

1

Works fine for me ! Thank you – jublikon Dec 14 '15 at 16:00

score 1 · Answer 2 · answered Dec 14 '15 at 15:44

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.

score 0 · Answer 3 · answered Dec 14 '15 at 15:49

0

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";
}

answered Dec 14 '15 at 15:49

Jameal G

324
3
10

Change bullet icon to double quote

3 Answers3