{"id":33330,"date":"2022-07-07T08:09:50","date_gmt":"2022-07-07T06:09:50","guid":{"rendered":"https:\/\/www.strato.nl\/blog\/?p=33330"},"modified":"2022-07-07T08:09:50","modified_gmt":"2022-07-07T06:09:50","slug":"opsommingstekens-stylen-met-css","status":"publish","type":"post","link":"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/","title":{"rendered":"Opsommingstekens stylen met CSS"},"content":{"rendered":"\n<p><strong>In dit blogartikel laten we zien hoe je opsommingstekens kunt aanpassen met een paar regels <a href=\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS<\/a>, zonder dat er een grafisch programma aan te pas komt.<\/strong><\/p>\n\n\n\n<p>De afgelopen jaren is er veel gebeurd op het gebied van CSS. Met <a href=\"https:\/\/developer.mozilla.org\/nl\/docs\/Learn\/CSS\/CSS_layout\/Flexbox\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Flexbox<\/a> en de <a href=\"https:\/\/developer.mozilla.org\/nl\/docs\/Web\/CSS\/CSS_Grid_Layout\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Grid-module<\/a> zijn belangrijke ontwerp- en lay-outtools toegevoegd waarmee je zelfs complexe lay-outs elegant en gemakkelijk kunt implementeren. Deze twee CSS-modules hebben een grote verandering teweeggebracht in de manier waarop weblay-outs worden gemaakt.<\/p>\n\n\n\n<p>Maar er zijn ook veel kleine dingen veranderd. Vandaag bekijken we zo&#8217;n kleine maar fijne mogelijkheid, namelijk de mogelijkheid om aan opsommingstekens een eigen draai te geven.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Lijsten met CSS<\/h2>\n\n\n\n<p>Velen van jullie zijn al bekend met de CSS-eigenschap van het <a href=\"https:\/\/developer.mozilla.org\/nl\/docs\/Web\/CSS\/list-style-type\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">list-style-type<\/a>. Dit geeft je een beetje controle over de vorm van de opsommingstekens &#8211; cirkel, vierkant, enz. &#8211; en of een genummerde lijst telkens met een nul begint, of dat je Romeinse cijfers wilt gebruiken in plaats van Arabische.<\/p>\n\n\n\n<p>Wij bedoelen hier echter een andere optie, waarbij je de opsommingstekens direct en zonder omwegen individueel qua vorm en kleur kunt aanpassen.<\/p>\n\n\n\n<p>Hier is een voorbeeld. Eerst de relevante sectie in het HTML-bestand:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"inhoud\">\n  &lt;h1>Boodschappenlijstje&lt;\/h1>\n  &lt;ul>\n    &lt;li>Boter&lt;\/li>\n    &lt;li>Kaas&lt;\/li>\n    &lt;li>Eieren&lt;\/li>\n    &lt;li>Melk&lt;\/li>\n  &lt;\/ul>\n  \n  &lt;h1>Coole games&lt;\/h1>\n  &lt;ul class=\"gamen\">\n    &lt;li>Lord of the Rings Online&lt;\/li>\n    &lt;li>Civilization V&lt;\/li>\n    &lt;li>Gothic 1-3&lt;\/li>\n    &lt;li>Games Dev Tycoon&lt;\/li>\n  &lt;\/ul>\n  \n  &lt;h1>Edelmetalen&lt;\/h1>\n  &lt;ol>\n    &lt;li>Platina&lt;\/li>\n    &lt;li>Goud&lt;\/li>\n    &lt;li>Zilver&lt;\/li>\n  &lt;\/ol>\n&lt;\/div><\/pre>\n\n\n\n<p>De HTML-code zal velen bekend voorkomen. We hebben twee lijsten met opsommingstekens (<code>&lt;ul&gt;<\/code>) en \u00e9\u00e9n genummerde lijst (<code>&lt;ol&gt;<\/code>) in een <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">div<\/code>-box. Zoals je je kunt voorstellen, ziet het resultaat zonder CSS er functioneel maar niet spectaculair uit:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2022\/06\/Lijstjes-maken-met-CSS-1.jpg\" alt=\"Opsommingstekens aanpassen met CSS: alleen HTML zonder CSS\" class=\"wp-image-33332\" width=\"281\" height=\"446\" srcset=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2022\/06\/Lijstjes-maken-met-CSS-1.jpg 375w, https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2022\/06\/Lijstjes-maken-met-CSS-1-189x300.jpg 189w\" sizes=\"auto, (max-width: 281px) 100vw, 281px\" \/><figcaption>Niet spectaculair: HTML-lijsten zonder opmaak<\/figcaption><\/figure><\/div>\n\n\n\n<p>Met behulp van een beetje CSS-code\u2026<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">body {background: #07a; padding: 2%;}\n\n.inhoud {background: #fff; color: #333; padding: 2%;}\n\nh1 {font-size: 22px;}\n\nul li {line-height: 1.7;}\n\n::marker {color: #07a;}\nul ::marker {font-size: 110%; content: \"\ud83d\uded2 \";}\nol ::marker {font: bold 140% 'comic sans ms', cursive;}\n.gamen ::marker {content: \"\ud83c\udfae \";}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Hoe werkt het?<\/h2>\n\n\n\n<p>Met het <a href=\"https:\/\/developer.mozilla.org\/de\/docs\/Web\/CSS\/::marker\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">::marker pseudo-element<\/a> kun je de opsommingstekens gericht be\u00efnvloeden. Je kunt de opsommingstekens targeten en ze een andere kleur, lettertype of grootte geven. In regel 9 van de CSS-code hebben we alle opsommingstekens bijvoorbeeld een blauwe kleur gegeven (<code>#07a<\/code> \u2192 <code>#0077aa<\/code>).<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2022\/06\/Lijstjes-maken-met-CSS-2.jpg\" alt=\"Opsommingstekens aanpassen met CSS: HTML met een beetje CSS\" class=\"wp-image-33333\" width=\"424\" height=\"494\" srcset=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2022\/06\/Lijstjes-maken-met-CSS-2.jpg 565w, https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2022\/06\/Lijstjes-maken-met-CSS-2-257x300.jpg 257w\" sizes=\"auto, (max-width: 424px) 100vw, 424px\" \/><figcaption>Een eigen kleur voor de opsommingstekens<\/figcaption><\/figure><\/div>\n\n\n\n<p>Je kunt de opsommingstekens ook vervangen door een symbool of emoji. Dat hebben we in regel 10 en 12 gedaan. In ons voorbeeld gebruiken we het shopping cart emoji en de controller emoji. Je kunt zelfs veel verder gaan en hier <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Animations\/Using_CSS_animations\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">CSS-animaties en -overgangen<\/a> toevoegen.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2022\/06\/Lijstjes-maken-met-CSS-3.jpg\" alt=\"Opsommingstekens aanpassen met CSS: HTML met speciale opsommingstekens met behulp van CSS\" class=\"wp-image-33334\" width=\"424\" height=\"547\" srcset=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2022\/06\/Lijstjes-maken-met-CSS-3.jpg 565w, https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2022\/06\/Lijstjes-maken-met-CSS-3-233x300.jpg 233w\" sizes=\"auto, (max-width: 424px) 100vw, 424px\" \/><figcaption>CSS gebruiken: emoji&#8217;s en icoontjes als opsommingstekens<\/figcaption><\/figure><\/div>\n\n\n\n<p><a href=\"https:\/\/caniuse.com\/?search=%3A%3Amarker\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Browserondersteuning<\/a> voor <code>::marker<\/code> is goed. Alle huidige versies van Firefox, Safari en Chromium-browsers (Chrome, Brave, Vivaldi, Opera, Edge) ondersteunen dit pseudo-element.<\/p>\n\n\n\n<p>Safari en Firefox voor Android lijken de animaties en overgangen echter simpelweg niet bij te kunnen houden.<\/p>\n\n\n\n<p>Als je het voorbeeld live wilt zien, kun je terecht op het <a href=\"https:\/\/codepen.io\/Ralf-Brainberger\/pen\/QWQYyKq\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">CodePen-codeplatform<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In dit blogartikel laten we zien hoe je opsommingstekens kunt aanpassen met een paar regels CSS, zonder dat er een grafisch programma aan te pas komt. De afgelopen jaren is er veel gebeurd op het gebied van CSS. Met Flexbox en de Grid-module zijn belangrijke ontwerp- en lay-outtools toegevoegd waarmee je zelfs complexe lay-outs elegant [&hellip;]<\/p>\n","protected":false},"author":39,"featured_media":33335,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[14],"tags":[460,163],"class_list":["post-33330","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-handige-tips","tag-css","tag-website"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Opsommingstekens stylen met CSS - STRATO blogt<\/title>\n<meta name=\"description\" content=\"In dit blogartikel laten we zien hoe je opsommingstekens kunt aanpassen met een paar regels CSS. Puur en simpel.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Opsommingstekens stylen met CSS - STRATO blogt\" \/>\n<meta property=\"og:description\" content=\"In dit blogartikel laten we zien hoe je opsommingstekens kunt aanpassen met een paar regels CSS. Puur en simpel.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/\" \/>\n<meta property=\"og:site_name\" content=\"STRATO blogt\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-07T06:09:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2022\/06\/Lijstjes-maken-met-CSS.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"601\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Vladimir Simovi\u0107\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vladimir Simovi\u0107\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/\"},\"author\":{\"name\":\"Vladimir Simovi\u0107\",\"@id\":\"https:\/\/www.strato.nl\/blog\/#\/schema\/person\/1751e1e82c517dda5bf5ef8b96a3680a\"},\"headline\":\"Opsommingstekens stylen met CSS\",\"datePublished\":\"2022-07-07T06:09:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/\"},\"wordCount\":387,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2022\/06\/Lijstjes-maken-met-CSS.jpg\",\"keywords\":[\"CSS\",\"Website\"],\"articleSection\":[\"Handige Tips\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/\",\"url\":\"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/\",\"name\":\"Opsommingstekens stylen met CSS - STRATO blogt\",\"isPartOf\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2022\/06\/Lijstjes-maken-met-CSS.jpg\",\"datePublished\":\"2022-07-07T06:09:50+00:00\",\"description\":\"In dit blogartikel laten we zien hoe je opsommingstekens kunt aanpassen met een paar regels CSS. Puur en simpel.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/#primaryimage\",\"url\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2022\/06\/Lijstjes-maken-met-CSS.jpg\",\"contentUrl\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2022\/06\/Lijstjes-maken-met-CSS.jpg\",\"width\":1024,\"height\":601},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.strato.nl\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Opsommingstekens stylen met CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.strato.nl\/blog\/#website\",\"url\":\"https:\/\/www.strato.nl\/blog\/\",\"name\":\"STRATO blogt\",\"description\":\"Nieuws en tips over webhosting!\",\"publisher\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.strato.nl\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.strato.nl\/blog\/#organization\",\"name\":\"STRATO blogt\",\"url\":\"https:\/\/www.strato.nl\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/www.strato.nl\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2019\/11\/strato_signet_blogt_nl_wei\u00df.png\",\"contentUrl\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2019\/11\/strato_signet_blogt_nl_wei\u00df.png\",\"width\":259,\"height\":42,\"caption\":\"STRATO blogt\"},\"image\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.strato.nl\/blog\/#\/schema\/person\/1751e1e82c517dda5bf5ef8b96a3680a\",\"name\":\"Vladimir Simovi\u0107\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/www.strato.nl\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/vladimir-simovic-strato-blog-96x96.jpg\",\"contentUrl\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/vladimir-simovic-strato-blog-96x96.jpg\",\"caption\":\"Vladimir Simovi\u0107\"},\"description\":\"Vladimir Simovi\u0107 setzt seit 2000 mit HTML &amp; CSS und seit 2004 mit WordPress Website-Projekte um. Seit Januar 2004 hat er als einer der ersten Blogger im deutschsprachigen Raum zu den WordPress Anf\u00e4ngen Tipps und Tricks ver\u00f6ffentlicht. Seit April 2022 ist er als Redakteur f\u00fcr den Blog-Bereich von STRATO verantwortlich und verfasst Informationsartikel insbesondere zu WordPress Themen. Im Laufe der Jahre hat er Fachb\u00fccher sowie \u00fcber 60 Fachartikel publiziert und weit \u00fcber hundert WordPress Projekte betreut und umgesetzt. Aktuell besch\u00e4ftigt er sich mit dem Einsatz von KI im Content-Marketing.\",\"sameAs\":[\"https:\/\/www.vladimir-simovic.de\"],\"url\":\"https:\/\/www.strato.nl\/blog\/author\/vladimir-simovic\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Opsommingstekens stylen met CSS - STRATO blogt","description":"In dit blogartikel laten we zien hoe je opsommingstekens kunt aanpassen met een paar regels CSS. Puur en simpel.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/","og_locale":"nl_NL","og_type":"article","og_title":"Opsommingstekens stylen met CSS - STRATO blogt","og_description":"In dit blogartikel laten we zien hoe je opsommingstekens kunt aanpassen met een paar regels CSS. Puur en simpel.","og_url":"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/","og_site_name":"STRATO blogt","article_published_time":"2022-07-07T06:09:50+00:00","og_image":[{"width":1024,"height":601,"url":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2022\/06\/Lijstjes-maken-met-CSS.jpg","type":"image\/jpeg"}],"author":"Vladimir Simovi\u0107","twitter_card":"summary_large_image","twitter_misc":{"Geschreven door":"Vladimir Simovi\u0107","Geschatte leestijd":"3 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/#article","isPartOf":{"@id":"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/"},"author":{"name":"Vladimir Simovi\u0107","@id":"https:\/\/www.strato.nl\/blog\/#\/schema\/person\/1751e1e82c517dda5bf5ef8b96a3680a"},"headline":"Opsommingstekens stylen met CSS","datePublished":"2022-07-07T06:09:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/"},"wordCount":387,"commentCount":0,"publisher":{"@id":"https:\/\/www.strato.nl\/blog\/#organization"},"image":{"@id":"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2022\/06\/Lijstjes-maken-met-CSS.jpg","keywords":["CSS","Website"],"articleSection":["Handige Tips"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/","url":"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/","name":"Opsommingstekens stylen met CSS - STRATO blogt","isPartOf":{"@id":"https:\/\/www.strato.nl\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/#primaryimage"},"image":{"@id":"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2022\/06\/Lijstjes-maken-met-CSS.jpg","datePublished":"2022-07-07T06:09:50+00:00","description":"In dit blogartikel laten we zien hoe je opsommingstekens kunt aanpassen met een paar regels CSS. Puur en simpel.","breadcrumb":{"@id":"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/#primaryimage","url":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2022\/06\/Lijstjes-maken-met-CSS.jpg","contentUrl":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2022\/06\/Lijstjes-maken-met-CSS.jpg","width":1024,"height":601},{"@type":"BreadcrumbList","@id":"https:\/\/www.strato.nl\/blog\/opsommingstekens-stylen-met-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.strato.nl\/blog\/"},{"@type":"ListItem","position":2,"name":"Opsommingstekens stylen met CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.strato.nl\/blog\/#website","url":"https:\/\/www.strato.nl\/blog\/","name":"STRATO blogt","description":"Nieuws en tips over webhosting!","publisher":{"@id":"https:\/\/www.strato.nl\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.strato.nl\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/www.strato.nl\/blog\/#organization","name":"STRATO blogt","url":"https:\/\/www.strato.nl\/blog\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.strato.nl\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2019\/11\/strato_signet_blogt_nl_wei\u00df.png","contentUrl":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2019\/11\/strato_signet_blogt_nl_wei\u00df.png","width":259,"height":42,"caption":"STRATO blogt"},"image":{"@id":"https:\/\/www.strato.nl\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.strato.nl\/blog\/#\/schema\/person\/1751e1e82c517dda5bf5ef8b96a3680a","name":"Vladimir Simovi\u0107","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.strato.nl\/blog\/#\/schema\/person\/image\/","url":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/vladimir-simovic-strato-blog-96x96.jpg","contentUrl":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2022\/04\/vladimir-simovic-strato-blog-96x96.jpg","caption":"Vladimir Simovi\u0107"},"description":"Vladimir Simovi\u0107 setzt seit 2000 mit HTML &amp; CSS und seit 2004 mit WordPress Website-Projekte um. Seit Januar 2004 hat er als einer der ersten Blogger im deutschsprachigen Raum zu den WordPress Anf\u00e4ngen Tipps und Tricks ver\u00f6ffentlicht. Seit April 2022 ist er als Redakteur f\u00fcr den Blog-Bereich von STRATO verantwortlich und verfasst Informationsartikel insbesondere zu WordPress Themen. Im Laufe der Jahre hat er Fachb\u00fccher sowie \u00fcber 60 Fachartikel publiziert und weit \u00fcber hundert WordPress Projekte betreut und umgesetzt. Aktuell besch\u00e4ftigt er sich mit dem Einsatz von KI im Content-Marketing.","sameAs":["https:\/\/www.vladimir-simovic.de"],"url":"https:\/\/www.strato.nl\/blog\/author\/vladimir-simovic\/"}]}},"_links":{"self":[{"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/posts\/33330","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/comments?post=33330"}],"version-history":[{"count":15,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/posts\/33330\/revisions"}],"predecessor-version":[{"id":33559,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/posts\/33330\/revisions\/33559"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/media\/33335"}],"wp:attachment":[{"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/media?parent=33330"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/categories?post=33330"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/tags?post=33330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}