{"id":60137,"date":"2023-07-18T03:01:41","date_gmt":"2023-07-17T17:01:41","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=60137"},"modified":"2023-07-18T02:25:13","modified_gmt":"2023-07-17T16:25:13","slug":"wordpress-list-style-user-css-middle-pseudo-class-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-list-style-user-css-middle-pseudo-class-tutorial\/","title":{"rendered":"WordPress List Style User CSS Middle Pseudo Class Tutorial"},"content":{"rendered":"
\"WordPress<\/a>

WordPress List Style User CSS Middle Pseudo Class Tutorial<\/p><\/div>\n

Sorry, but before moving on from yesterday’s WordPress List Style Image Primer Tutorial<\/a> “ul li” list style image work, we need to add another hard to remember GET argument arrangement, because between the ::<\/font> …<\/p>\n


\n<style> ul li::<\/font>before { content: ''; display: inline-block; height: 25px; width: 35px; background-image: url('\" + listimage + \"'); background-size: contain; background-repeat: no-repeat; margin-left: -35px; } <\/style>
\n<\/code><\/p>\n

… colons via …<\/p>\n

<?php echo ”
\n
\nfunction list_style_image_check() {
\n var listimage=location.search.split('listimage=')[1] ? decodeURIComponent(location.search.split('listimage=')[1].split('&')[0]) : \"\";
\n if (listimage != '') {
\n document.body.innerHTML+=\"<style> ul.noclass li\" + (location.search.split('midpseudoclass=')[1] ? (':' + decodeURIComponent(location.search.split('midpseudoclass=')[1].split('&')[0])) : \":\") + \"<\/font>:before { content: ''; display: inline-block; height: 25px; width: 35px; background-image: url('\" + listimage + \"'); background-size: contain; background-repeat: no-repeat; margin-left: -35px; } <\/style>\";
\n }
\n}
\n<\/code>
\n“; ?><\/p>\n

… in the CSS styling, the user can now optionally insert, via “&midpseudoclass=[middle pseudo class eg. first-child]” or “?midpseudoclass=[middle pseudo class eg. first-child]” a CSS “ul li” styling additional consideration. For this URL “appendage” you might consider pseudo-class<\/a> values such as …<\/p>\n