Using pseudo elements with list items

[Fun Seeker]

Hi everyone,

Is there a way to stop the text from wrapping under a pseudo-element when used with list items? In the example provided, you see how the text, in all but the first line, wraps under the pseudo-element. I would like to have the text align under the first character (red line). Nothing I've tried has worked thus far. Any help would be very much appreciated.

Kind regards,

Mark

[Ben M · Accepted solution]

For the ul tag of your list you can set the value ( list-style-position: outside; ) and that should keep the text from wrapping underneath. You can see it in action here: https://www.w3schools.com/cssref/pr_list-style-position.asp .  If you have a question about implementing this within your specific page we will need to see the code.

[Nancy OShea]

A correctly formed list will line up correctly without any extra help. So either your HTML is malformed or something in your CSS code is messing things up.  See screenshot of an ordinary unordered list in Code / Live view.  Note: no code errors present as denoted by the green checkmark in a circle.

If you still need help, upload your page to a remote server and post the URL.

[Fun Seeker]

Thanks so much. I was able to correct it using list-style-position: outside.

Kind regards,

Mark