Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Unorder list marker behaiviour as a word (inline)

Hi i’m trying to recreate this design but I don’t know how to apply the style to achieve this. I’m trying with the ul tag but without success.
This is the reference image.

enter image description here

.item-container{
  width: 260px;
}
<ul class="item-container">
  <li class="item">Te realizaremos algunas preguntas para validar tu identidad</li>
  <li class="item">Luego te enviaremos un código de verificación y un enlace</li>
  <li class="item">Accedé al enlace y seguí los pasos</li>
</ul>

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

I’m not sure what you mean by "I’m trying to recreate this design"
Because if you want an unordered list you can just do:

<ul>
    <li>Hello</li>
    <li>Hi</li>  
    <li>How are you</li>
</ul>

Though if you’re trying to make it so overflowing text gets sent back under the bullet, you can add this CSS:

ul {
    width: 100px;
    list-style-position: inside;
}

Then up to you to style it as you wish

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading