How to get checkboxes in an unordered list

OL Connect Professional Designer
1

I have an un-ordered list defined in my document that currently shows the default filled circle. I would like to change this to check boxes. However, everything I try seems to change the way longer lines wrap. When it is set to use the default longer lines wrap and start even with the first line. When I change the object like in the code below the second line starts to the left of the first line. Does anyone know how I can accomplish this?

in CSS:

li:before {
content: “\2610”; /* Insert content that looks like empty square*/
padding-right: 15px;
}

List definition in source of document:

Coffee this line will wrap and start to the left of the first line. How do I get the lines to all start at the same position and be like a normal list
Tea
Coca Cola

2

It’s wrapping the text down to the start of the first character in that list item. Since you’re inserting that empty square directly into the HTML content, your wrapped text naturally ends up wrapping there, as if you had manually typed the Square character at the start of each line.

So you need to shift it over a bit when it breaks to the next line.

Try this for your CSS:

li {
/* handle multiline */
overflow: visible;
padding-left: 17px;
position: relative;
}

li:before {
/* your own marker in content */
content: “\2610”;
left: 0;
position: absolute;
}

Courtesy of html - Unicode character as bullet for list-item in CSS - Stack Overflow

3

Awesome! That works perfectly. Two more related questions:

1 - How do I get a little more space between the square and the text? I tried adding padding-right but that did not work at all.
2 - if this were an ordered list with numeric characters how would I remove the period and add opening/closing parentheses: 1. to (1)

4

To shift it right, just adjust the padding-left to a larger number.

For the customized numbering, I’ll direct you to this link that has an excellent walkthrough on the subject.

In their step 4, they use this line to display their custom counter:

content: counter(step-counter);

To wrap it in parenthesis, change it to: content: “(” counter(step-counter) “)”;