{"id":241,"date":"2025-05-15T02:23:52","date_gmt":"2025-05-15T02:23:52","guid":{"rendered":"https:\/\/www.kwwd.co.uk\/blog\/?p=241"},"modified":"2025-05-15T02:23:52","modified_gmt":"2025-05-15T02:23:52","slug":"css-ul-li-styling","status":"publish","type":"post","link":"https:\/\/www.kwwd.co.uk\/blog\/css-ul-li-styling\/","title":{"rendered":"CSS UL Li Styling"},"content":{"rendered":"<pre><code class=\"language-html line-numbers\">\r\n&lt;style>\r\nmain ul li a {\r\n  display: block;\r\n  padding: 15px 20px;\r\n  margin-bottom: 10px;\r\n  text-decoration: none;\r\n  border-radius: 20px; \/* Pill shape *\/\r\n  transform: scale(1);\r\n  transition: background-color 0.3s ease, transform 0.2s ease-in-out;\r\n  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); \/* Subtle shadow *\/\r\n  display: flex; \/* Use flexbox for alignment *\/\r\n  align-items: center; \/* Vertically align items in the center *\/\r\n}\r\n\r\nmain ul li a span.emoji {\r\n  margin-right: 15px; \/* Add some space between the emoji and text *\/\r\n  font-size: 1.2em; \/* Adjust emoji size if needed *\/\r\n}\r\n\r\nmain ul li a span.link-text {\r\n  flex-grow: 1; \/* Allow the text to take up remaining space *\/\r\n  text-align: center; \/* Center the text horizontally *\/\r\n}\r\n\r\nmain ul li a:hover {\r\n  transform: scale(1.05); \/* Slightly scale up on hover *\/\r\n  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.2); \/* Stronger shadow on hover *\/\r\n  opacity: 0.8; \/* Slightly fade on hover *\/\r\n}\r\n\r\nmain ul li:nth-child(1) a {background: linear-gradient(to right, #007bff, #66a3ff); border: 2px solid #d3a006}\r\nmain ul li:nth-child(1) a:hover {border-color: #ea9c0b;}\r\n\r\nmain ul li:nth-child(2) a {background: linear-gradient(to right, #1da1f2, #72bfef); border: 2px solid #c2d306}\r\nmain ul li:nth-child(2) a:hover {border-color: #d5df63;}\r\n\r\nmain ul li:nth-child(3) a {background: linear-gradient(to right, #444444, #8e8e8f); border: 2px solid #d3a006}\r\nmain ul li:nth-child(3) a:hover {border-color: #e7ee0c;}\r\n\r\n\/** ETC For all li elements **\/\r\n&lt;\/style>\r\n\r\n\r\n&lt;main>\r\n        &lt;p>Intro Text&lt;\/p>\r\n        &lt;ul>\r\n\r\n            &lt;li>&lt;a href=\"#\">&lt;span class=\"emoji\">\ud83e\uddf5&lt;\/span>&lt;span class=\"link-text\">&lt;span class=\"link-text\">Link 1&lt;\/span>&lt;\/a>&lt;\/li>\r\n            &lt;li>&lt;a href=\"#\">&lt;span class=\"emoji\">\u2601\ufe0f&lt;\/span>&lt;span class=\"link-text\">&lt;span class=\"link-text\">link 2&lt;\/span>&lt;\/a>&lt;\/li>\r\n            &lt;li>&lt;a href=\"#\">&lt;span class=\"emoji\">\u2712\ufe0f&lt;\/span>&lt;span class=\"link-text\">&lt;span class=\"link-text\">Link 3&lt;\/span>&lt;\/a>&lt;\/li>\r\n            &lt;!-- More Links-->\r\n        &lt;\/ul>\r\n&lt;\/main>      \r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>&lt;style> main ul li a { display: block; padding: 15px 20px; margin-bottom: 10px; text-decoration: none; border-radius: 20px; \/* Pill shape *\/ transform: scale(1); transition: background-color [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,5],"tags":[10,47],"class_list":["post-241","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-css","tag-html"],"_links":{"self":[{"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/posts\/241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=241"}],"version-history":[{"count":0,"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/posts\/241\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}