Border around ul square with css

I have simple <ul><li> list which is type="square". What I'm trying to do is to make this square white but with black border only around the square.

The reason is because my page background color is white and the square isn't visible.

I'm sure that is something easy but can't figured it out. Here is what I've tried so far

ul li { color: white; } li::before { border: 1px solid black; } ul li span { color: black; }

<ul type="square"> <li> <span>Item 1</span> </li> <li> <span>Item 2</span> </li> </ul>

As you can see the square isn't visible.

4 Answers

Instead of list-style-type use Psuedo element for li and style it to look like square and add border

ul{ list-style-type:none; } ul li { // color: white; position:relative ; } ul li::before { content: ''; width: 10px; height: 10px; background: white; position: absolute; left: -20px; border: 1px solid #F00; top: 3px; } ul li span { color: black; }

<ul> <li> <span>Item 1</span> </li> <li> <span>Item 2</span> </li> </ul>

change this

ul li { color: white; } 

with this

ul li { color: black; } 

or with any color what you need, as long as the color not same as the background

You can't target the existing list item bullet point, but you can modify your before element to create a new custom bullet with the style you want.

Unfortunately, there is no way I know of to get the position of the bullet point, so you'll have to just choose a position that looks good to you using the 'left' property.

ul li { color: white; } li::before { content: ""; display: inline-block; position: relative; left: -18px; width: 5px; height: 5px; background: white; border: 1px solid black; vertical-align: middle; } ul li span { color: black; }

<ul type="square"> <li> <span>Item 1</span> </li> <li> <span>Item 2</span> </li> </ul>

You can use unicode symbols in content property of ::before pseudoelement. See UTF-8 Geometric Shapes to find required symbol and convert that code to HEX. For your case the \20e3 is fit:

li { list-style-type: none; } li::before { content: "\20e3"; margin: 0 1em 0 0; }

<ul> <li>Item 1</li> <li>Item 2</li> </ul>