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:

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:

htmlcsshtml-listspseudo-element

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vuejs responsive navbar with collapsible sidebar using Bootstrap or Bootstrap-Vue libraries

Vue.js is the framework I'm utilizing for my current project. In creating a dashboard section, I am seeking to implement a responsive design using either bootstrap, bootstrap-vue, or plain HTML and CSS. Below are the images of the desired dashboard -& ...

htmlvue.jsnavbarsidebarbootstrap-vue

Select the hidden HTML option value automatically according to the previous option selected

I am working on a form that includes 2 select tags with the options male and female. The first select, "gender", is visible to the user while the second select, "age", is hidden. <select name="gender"> <option value="1">Male</option> ...

javascripthtml

Utilizing Jquery within a Personalized Post Layout

Being a beginner in jquery, I managed to create this functionality - http://jsfiddle.net/t2x9G/3/ Currently working on a Wordpress project and exploring ways to have the dynamic text content pulled from a post rather than hardcoded in the script. $(&apos ...

phpjqueryhtmlwordpress

Why use @media (max-width:-1) in your code?

While reviewing CSS code created by another department, I noticed an interesting media descriptor: @media (max-width:-1) { ...standard css stuff here } The value of max-width cannot be less than 0, so what could be the purpose of this? Perhaps it was ...

css

What is the process for building a grid system similar to Bootstrap's 12-column grid using the new CSS Grid Layout?

Is there a way to implement a 12-column grid system similar to Bootstrap using CSS Grid? I am struggling to understand this new technology and would greatly appreciate it if someone could provide a demo. My goal is to create a simple grid structure resem ...

csstwitter-bootstrapgridflexboxcss-grid

Don't conceal the :after and :before elements when using CSS custom checkboxes

I have created my own custom checkboxes using this CSS code: input[type="checkbox"]{ display: none; } .checkbox{ position: relative; width: 60px; height: 19px; background-color: green; border-radius: 10px; } .checkbox input[type="checkbox"] + ...

htmlcssbuttoncheckbox

Stop images within contenteditable divs from being easily dragged and dropped into unrelated div elements

In order to maintain data integrity, I have implemented a rule where users are allowed to drag images within a specific div. Later on, I need to retrieve the positions of these images within the div. However, it is crucial for my business requirements tha ...

htmlcss

Conceal/reveal div with initial partial visibility

http://jsfiddle.net/7RDBk/1/ At the moment, I am using slideUp and slideDown functions to hide and display a div. My goal is to have 25px of the div showing initially before expanding and going back to 25px when clicked. It seems like a simple task, but I ...

jquerycss

What causes my absolutely positioned element to disappear when using overflow-x: hidden?

I've been experimenting with the CSS property overflow-x: hidden on a container and noticed that it causes my element with position: absolute to disappear. To see this effect in action, check out this demo: https://codepen.io/Karina1703/pen/LYMzqEj ...

javascripthtmlcss

No links were detected in the page source

I am attempting to locate URL links within the page source of this website. http://data2.7m.cn/database/index_en.htm However, I have been unable to find any links in the page source or even after trying Ajax calls with Firebug. There are no links for cou ...

jqueryajaxhtml

Using jQuery to assign the value of a hidden element to data being posted

When using jQuery's post() method to call an ajax action that returns JSON data ({"Success": "true" } or {"Success": "false"}), the value of a hidden HTML element is supposed to be set to the Success value in the returned object. However, after settin ...

javascriptjqueryhtmlajaxjson

I am experiencing an issue where my application, built using NodeJS, Express, and Javascript, is failing to insert form data into the database despite

I am facing a challenge with my app's MVC design pattern where I am unable to insert form information into the corresponding table in the database. Despite installing the body-parser package via npm, the form is not functioning as expected. Can anyone ...

javascripthtmlnode.jsexpress

What is the best way to format PHP emailed content from a web form?

Currently, I am working on a web contact page and facing an issue where the emails being sent arrive as plain text. I would like to enhance them by adding a background, incorporating the organization's logo, and styling the text to align with the webs ...

phphtmlcssemailcontact-form

Ensure there is a blank space preceding a table only when the table is being physically printed

I am currently in the process of developing a report card system for students in grades K-6. The report card will display specific tables based on the student's grade level. For example, a 5th grader may not have a "Reading Stage" table displayed on t ...

htmlcss

How to customize the appearance of the Facebook login button alongside other login options

I'm having trouble positioning the Facebook login button in my header. It keeps appearing far to the left and below other links :) I'm currently testing it on this page: My goal is to have the button display just to the left of the login link a ...

htmlcsslayoutstyling

``Please proceed with the form submission only if it has been verified and

Within my web application, there are several pages that handle submitted data from forms. I would like to prevent the following scenario: A user creates a form on the client side with identical fields to my original form and sends it to the URL responsibl ...

phphtmlforms

Avoiding code duplication in Angular: tips for optimizing functions

Is there a way to avoid repeating the same for loop for a second variable and use only one? I'm trying to apply the "Don't repeat yourself" method here. Should I consider using an array? JS: var app=angular.module('xpCalc', []); app.c ...

javascripthtmlangularjsfunctiondry

What could be causing spacing problems with fontawesome stars in Vue/Nuxt applications?

Currently, I am working on implementing a star rating system in Nuxt.js using fontawesome icons. However, I have encountered an issue where there is a strange whitespace separating two different stars when they are placed next to each other. For instance, ...

javascriptcssvue.jsnuxt.jsfont-awesome

Chic and perfectly aligned stripe button design

I need assistance with centering and styling the Stripe checkout button labeled "update card." Additionally, I want to adjust the appearance of the card number input field to be normal but readonly. How can I achieve this without relying on Bootstrap' ...

htmlcsstwitter-bootstrapstripe-payments

Finding JPG images using Jquery selector

I am looking to utilize jQuery to specifically target <a href=""> elements that have 'href' attributes with file extensions '.JPG' or '.jpg' For instance: To only select these 'links' <a target=& ...

jqueryhtml