CSS - Changing text distance and image of a list item

Asked

Viewed 257 times

1

I have the following orderly list: 

        ol{
            list-style: none;
        	counter-reset: item;
    	    list-style-position: outside;
        }
        ol li  {
    	    counter-increment: item;	
    	    margin-bottom: 15px;
        }
        ol li::before{
    	    margin-right: 10px;
    	    content: counter(item);
    	    border-radius: 100%;
        	color: #2388ED;
    	    border: 2px solid #2388ED;
    	    text-align: center; 	
    	    display: inline-block;
        	padding: 4px 10px;
    	    font-family: sans-serif;
        	font-weight: bolder;
    	    font-size: 1.5em;
        }
        
<body>
        <ol>
            <li>
                “Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning.” 
                ― Rick Cook, The Wizardry Compiled
            </li>
            <li>
                “Talk is cheap. Show me the code.” 
                ― Linus Torvalds
            </li>
        </ol>
    
    </body>

My doubt was to know how I change the distance between the image of my 'modified' list item and the text, to align the text with the first line after the line breaks.

html css

1 answer

0


A pseudo element ::before or ::after is always a direct child of the very element that receives it.

Image taken directly from Chrome Devtools inserir a descrição da imagem aqui

Example:

<li>
    ::before
    texto
    ::after
</li>

So I used display:flex in LI and adjust items to stay online and centrally.

See the example how it looks:

ol {
  list-style: none;
  counter-reset: item;
  list-style-position: outside;
}
ol li  {
    counter-increment: item;    
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
ol li::before{
    margin-right: 10px;
    content: counter(item);
    border-radius: 100%;
    color: #2388ED;
    border: 2px solid #2388ED;
    text-align: center;     
    display: inline-block;
    padding: 4px 10px;
    font-family: sans-serif;
    font-weight: bolder;
    font-size: 1.5em;
}
<ol>
    <li>
        “Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning.” 
        ― Rick Cook, The Wizardry Compiled
    </li>
    <li>
        “Talk is cheap. Show me the code.” 
        ― Linus Torvalds
    </li>
    <li>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam ipsam vero tenetur. Exercitationem, voluptate cupiditate. Ducimus nesciunt quos sit ratione perspiciatis natus atque dolores ab, minima facere quae saepe nostrum asperiores, velit voluptas molestias dolor ex labore cum expedita vero inventore. Nobis rem natus culpa voluptas maxime enim quisquam in, sequi eum consequatur veniam optio cumque, ullam dolore quas vero debitis quis mollitia facilis. A animi nihil fugiat aliquid qui veniam repellendus, optio tempore ratione obcaecati quisquam illum, aspernatur libero. Fugit magnam, minima neque dignissimos laboriosam adipisci enim asperiores labore quaerat nesciunt ipsum explicabo ratione quae dolore soluta distinctio blanditiis?
    </li>
</ol>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.