Changing the size of the image/gif I used for the list-style in css

1 week ago 11
ARTICLE AD BOX

You could just use a background image on a pseudo element instead of using it as a bullet point:

.contentsT { justify-content: space-evenly; flex-direction: column; /* remove list styling and padding*/ list-style: none; padding-left: 0; } .contentsT li { display: flex; } .contentsT li::before { /* this is the bullet point change width and height to match the image size you want */ content: ""; display: block; min-width: 0.75rem; max-width: 0.75rem; height: 0.75rem; margin: 0.25rem 0.75rem 0 0.75rem; /* top margin just to make bullet align with content */ background-size: cover; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAY1BMVEX///8AAACHh4dQUFB+fn5cXFxMTEzS0tJxcXHb29vCwsJubm77+/v19fXh4eGDg4PMzMzu7u6qqqqkpKQsLCyQkJC2trYgICCbm5s5OTkwMDCwsLCVlZU1NTViYmLk5OQMDAwlvWJZAAADmklEQVR4nO3dCXqqQBAEYBq3qHFPyKKJuf8pXwjR4AtGQbpr6Kn/BNQnzsZMT5IQERERERERERERERERERERERFRTbPxZL3rTwe94XDYG0z7u/VkPEM/VFvmWTqUasM0m6Mf70bzzeBMuB+DTWdTLhcX0x0sRuiHrW+cXh2vkI7Rj1zL9rVmvtzrFv3Y15o9NohXeOxC+zrrN86X64ee8b7u3++39B4d4i+bm/PlNugYZ42eWgko8hRo53HXUr7cHTpMhWWL+XJLdKD/3daCVumjI51YPbQeUORhhY71o+039CCYN/VZKaDIMzpaYaoWMJA2tacYUKSHjpckL6oBRV7QAZtMk+p59R7ws9dABtR+RQvAF1W3kfkBa240u4lToE5Dr6P/DdL1aw3VqgEGcCvTgCL2w3CN2cRfzPuM9ueDlxjPF23/hAXbvyIgoIhlwDYXna5n2CuOIAFF7BYZ21oXrevJKmA7K9tNGK2G38MCith807j940tzqUXAGTCgiMXHN/vRTJnByAb7E1r8iM0/YbfjUT0hOKD+2G2LDijaOzbe0AHlTTfgHJ3vk+4mMWRvf6Db66PTfdEMiJo2ndKcRF2/21DTQjEhOts3vYAhtKQ5vdYUN/U9tVZL+I6O9u1dLSE62ZFWwD062NFeKWGGDnaUKSUMYchW0Bq4nTsYYk/rszc6V4lOQPQKTZnOas0YHatE5/jJBB2rZKKScI2OVaIzbtuhY5XsVBJiF7tP6Sx9222BumyqkvDyYUk7A5WEVvv0rqEzqAln0CYyZEImrOT/f+i/LfXfH/of0/gfl/qfW/ifH/qf4/tfp/G/1hbQoEZrvdT/mrf/7xb+vz2F09RoBYzgG7D/7/j+92KE8kfUCxjBnij/+9rCeE01AwYxcNPdXxpCa6pcSNL9Pu8I9urj2xrtgBGcmUGv1hgcXsMufWuOZw78nz/0f4Y0gnPA/s9yR3AeP4KaCv7rYkRQ2ySC+jT+awxFUCcqglpf/uu1RVBzz7JXhBXbdV/7MoL6pTY1aN2X2QUHjKAWdAT1vHU7jSBqskdQVz+CuxEiuN8i8X9HSRLBPTOJ/7uCkgjue0r839mVRHDv2qfZbfumFqHfnZfzfv/hl22TTSlvnbnD8su89j2kHbxRdrT4uDLdRxfvki3M15c3Tr+vO/jrndhn6blJci/N1HbdW6u6lzv0fo+IiIiIiIiIiIiIiIiIiIiIiChA/wBhkU7yoTtwBgAAAABJRU5ErkJggg==) } <ul class="contentsT"> <li> akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj akdflfdlfdkj </li> <li> akdflfdlfdkj </li> <li> akdflfdlfdkj </li> <li> akdflfdlfdkj </li> </ul>
Read Entire Article