{"id":1795,"date":"2015-12-28T15:11:55","date_gmt":"2015-12-28T21:11:55","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1795"},"modified":"2015-12-28T15:11:55","modified_gmt":"2015-12-28T21:11:55","slug":"css-list-styles","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/css-list-styles\/","title":{"rendered":"CSS List Styles"},"content":{"rendered":"

HTML unordered lists are characterized by <li><\/strong> elements within a <ul><\/strong> tag. The default styling of these unordered lists indicates that each individual list item is to follow a round bullet symbol, but the list-style-type\u00a0<\/strong>property does take other values. Setting the list-style-type value to circle, for example, will cause the default bullet styling to be replaced by a circle, and\u00a0list-style-type: square<\/strong> replaces the default bullet with a square.<\/p>\n

list-style-type: circle;<\/pre>\n
Shapes aren’t the only options to choose from. You can use list-style-type: decimal<\/strong> to replace the default styling with sequential numbers, list-style-type: upper-latin<\/strong> for the default styling to be replaced with sequential letters (uppercase, for lowercase use lower-latin). You can also use upper-roman or lower-roman for sequential roman numerals (in upper or lower case, respectively). There’s also always the option to use list-style-type: none<\/strong> to get rid of the default styling all together.<\/p>\n
Another way to customize the li elements\u00a0of the <ul>\u00a0<\/strong>tag is by using the css :before<\/strong> pseudo-selector with the content<\/strong> property. Set the list-style-type<\/strong> of the <ul><\/strong> to none, then use the li<\/strong> selector with :before<\/strong> to set the content to be any symbol you like, which will make your symbol of choice appear before all the list items, just like the default bullet styling would. The css should look something like this:<\/p>\n
ul{\n    list-style-type: none;\n}<\/pre>\n
li:before{\n    content: \"^\";\n    position: absolute;\n}<\/pre>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
HTML unordered lists are characterized by <li> elements within a <ul> tag. The default styling of these unordered lists indicates that each individual list item is to follow a round bullet symbol, but the list-style-type\u00a0property does take other values. Setting […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[173,174,181],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1795"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1795"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1795\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1795"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1795"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}