Replace the bullet icon with a double quote symbol

Question

Replace the bullet icon with a double quote symbol

My HTML List needs a different look - I want to change the bullet icon into a double quote icon.

A website that I found interesting is this one.

Here's the CSS code I have:

.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 demonstrates the changes:

https://i.sstatic.net/gObw7.png

I want to replace the bullet icon with the double quote icon, not both icons together.

Any suggestions on how I can achieve this?

I want to make sure that the text doesn't align vertically when there's a line break: https://i.sstatic.net/UpBP3.png

html css html-lists pseudo-element

Answer 1

Answer №1

Instead of applying the list-style property directly to the li elements, you have it on the pseudo elements. To align double quotes properly, consider using 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>

Answer 2

Instead of applying the list-style property directly to the li elements, you have it on the pseudo elements. To align double quotes properly, consider using 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>

Answer 3

Answer №2

To update the bullet style, follow these steps:

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 eliminate the left padding and remove any indentation.

Answer 4

To update the bullet style, follow these steps:

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 eliminate the left padding and remove any indentation.

Answer 5

Answer №3

To avoid bullets creating new lines:

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

Answer 6

To avoid bullets creating new lines:

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

Replace the bullet icon with a double quote symbol

Answer №1

Answer №2

Answer №3

Similar questions

Listening for select elements that have remained unchanged

Issues with button hover causing background transition difficulties

Experience mind-bending timing functions in CSS animations with IE11

External CSS File causing improper sizing of canvas image

Center Button Horizontally and Vertically with CSS Code

What is the reason behind H1 tags not requiring a class or ID in CSS?

Modify the fixed div's class when the user scrolls past a certain section

Attempting to isolate just a fragment of the inner content

The selected jquery script is failing to function as intended

Unable to place an absolutely positioned Div within relative parent containers

Is there a method to give a webpage a subtle shimmering effect without utilizing CSS box-shadow?

Flexbox: Distribute remaining space evenly while allowing content to wrap

Adjust the dimensions of the text area to modify its height and width

What is the best way to output my PHP code into separate div elements?

extracting characters in php

Adjust the span's width to make it shift position

Encountering persistent issues while attempting to integrate socket.io into my Node.js application with Express

jQuery toggle functioning in one scenario, but failing in another

Can you explain how to utilize theme values in CSS within Mui?

Turning HTML into an image with the power of JavaScript