CSS - Change text distance and image of a list item

Question

CSS - Change text distance and image of a list item

Navigation

#1 by (0 votes)

1

I have the following ordered 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 question was how do I change the distance between the image from my 'modified' list item and the text, to leave the text aligned with the first line after the line breaks.

html css

asked by anonymous 11.10.2018 / 20:28

1 answer

Back where it was (VideoClub) ESC Function in Android Studio

score 0 · Accepted Answer

A pseudo element ::before or ::after is always a child directly from the element that receives it.

Image taken directly from Chrome DevTools

Example:

<li>::beforetexto::after</li>

SoIuseddisplay:flexonLIandsettheitemstostayonlineandcentrally.

Seetheexampleasfollows:

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>