Using pseudo elements with list items

Question

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 Answer

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 · Answer

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded