• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Using pseudo elements with list items

Contributor ,
Feb 20, 2021 Feb 20, 2021

Copy link to clipboard

Copied

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,

 

Marklists.jpg

TOPICS
Code , How to

Views

141

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Feb 20, 2021 Feb 20, 2021

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.

Votes

Translate

Translate
Community Expert ,
Feb 20, 2021 Feb 20, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 20, 2021 Feb 20, 2021

Copy link to clipboard

Copied

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.

 

image.png

 

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

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 21, 2021 Feb 21, 2021

Copy link to clipboard

Copied

LATEST

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

 

Kind regards,

 

Mark

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines