cannot custom bullets in list

Question

I am trying to custom my bullets for a list inside a specific < div > tag. For that I created a class associated with the < div > tag, and in my CSS stylesheet I asked for the bullets that I want inside lists within that tag. However, the bullets do not appear the way I want them to. The code seems to work, because I can add other cutomisations within the CSS style (make the text of the list bigger for instance), and it works.

I am using Spip for my website; maybe some of you won't be familiar with it: in my website's backoffice, I created a input area named TAKE_WITH_YOU and that's where the list is. Spip converts the list into a valid HTML list (ul and li), but I cannot access this code directly.

Here is my HTML code:

However, despite those changes, the bullets don't change from their default style. The code seems to work okay, because as I said before, I can change the font-size by changing the CSS, and if I put none in the ul list-style-type, the bullets do dissapear. However, any other value (disc, square, an image, a hex code) brings me back to my original bullets...

.take_it ul {
    list-style-type: "\25A1";
    /*
    I have also tried with:
    list-style-image: url(puce-blanche.gif);
    And with
    list-style-type: "□";
    */
}

.take_it li::before {
    content: "\25A1";
    /*Also tried with other values as above*/
    position: absolute;
    left: 0;
}

<BOUCLE_150(MOTS){titre=« 150. take_with_you »}>
#SET{ident_div,#TEXTE*}
#SET{title_div,#DESCRIPTIF}
</BOUCLE_150>

[(#TAKE_WITH_YOU*|oui)
<div id="#GET{ident_div}" class=« take_it »>
<h3>[(#GET{title_div}|textebrut)]</h3>
[(#TAKE_WITH_YOU*|cs_decoupe_compat|propre)]
</div>
]

What am I doing wrong? Thank you.

Answer 1

You can use list-style:none to customize the list-style. By looking at your code, I assume you are trying to use :before pseudo class to display the custom list style.

ul {
  list-style: none;
  position: relative;
  padding: 0;
  margin:0;
}
li {
  margin-left: 20px;
}
li:before {
  content: "\25A1";
  position: absolute;
  left: 0;
}

<ul>
<li>Take this</li>
<li>Take this one too</li>
<li>Take this one last time</li>
</ul>