{"id":98719,"date":"2022-06-07T09:25:00","date_gmt":"2022-06-07T07:25:00","guid":{"rendered":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?p=98719"},"modified":"2022-06-07T09:33:45","modified_gmt":"2022-06-07T07:33:45","slug":"listenzeichen-mithilfe-von-css-individuell-gestalten","status":"publish","type":"post","link":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/listenzeichen-mithilfe-von-css-individuell-gestalten\/","title":{"rendered":"Listenzeichen mithilfe von CSS individuell gestalten"},"content":{"rendered":"\n

Im folgenden Blogartikel werde ich dir zeigen, wie du nur mit CSS, die Listenzeichen individuell gestalten kannst. Es ist kein Grafikprogramm notwendig.<\/p>\n\n\n\n\n\n\n\n

In den letzten Jahren hat sich bei CSS sehr viel getan. Mit Flexbox<\/a> und dem Grid-Modul<\/a> sind wichtige Design- und Layout-Werkzeuge hinzugekommen, die es dir erm\u00f6glichen auch anspruchsvolle Layouts elegant und einfach umzusetzen. Diese beiden CSS-Module haben eine gro\u00dfe \u00c4nderung in der Vorgehensweise beim Erstellen von Weblayouts bewirkt.<\/p>\n\n\n\n

Aber auch im Kleinen hat sich viel getan und auf so eine kleine, aber feine M\u00f6glichkeit werde ich heute n\u00e4her eingehen, und zwar auf die M\u00f6glichkeit, die Listenzeichen ganz individuell zu gestalten.<\/p>\n\n\n\n

Listen mit CSS ansprechen<\/h2>\n\n\n\n

Viele von euch kennen bereits die CSS-Eigenschaft list-style-type<\/code><\/a>. Damit kannst du ein wenig die Form der Aufz\u00e4hlungszeichen bestimmen \u2013 Kreis, Quadrat etc. \u2013 und bestimmen, ob die nummerierte Liste mit einer f\u00fchrenden Null beginnt oder ob statt den arabischen die r\u00f6mischen Zahlen genutzt werden sollen.<\/p>\n\n\n\n

Nein, ich rede hier von einer anderen M\u00f6glichkeit, wo du direkt und ohne Umwege die Listenzeichen individuell an der Form und an Farben anpassen kannst.<\/p>\n\n\n\n

Hier ein Beispiel. Zuerst der relevante Abschnitt in der HTML-Datei:<\/p>\n\n\n\n

<div class=\"inhalt\">\n  <h1>Einkaufszettel<\/h1>\n  <ul>\n    <li>Butter<\/li>\n    <li>Eier<\/li>\n    <li>Fisch<\/li>\n    <li>Milch<\/li>\n  <\/ul>\n  \n  <h1>Coole Spiele<\/h1>\n  <ul class=\"zocken\">\n    <li>Herr der Ringe Online<\/li>\n    <li>Civilization V<\/li>\n    <li>Gothic 1-3<\/li>\n    <li>Games Dev Tycoon<\/li>\n  <\/ul>\n  \n  <h1>Edelmetalle<\/h1>\n  <ol>\n    <li>Platin<\/li>\n    <li>Gold<\/li>\n    <li>Silber<\/li>\n  <\/ol>\n<\/div><\/pre>\n\n\n\n
Der HTML-Code d\u00fcrfte f\u00fcr viele bekannt sein. Innerhalb einer div<\/code>-Box habe ich zwei Aufz\u00e4hlungslisten (<ul><\/code>) und eine nummerierte Liste (<ol><\/code>) untergebracht. Das Ergebnis ohne CSS schaut, wie du es dir gut vorstellen kannst, funktional, aber unspektakul\u00e4r aus:<\/p>\n\n\n\n
\"Ungestylte
Unspektakul\u00e4r: ungestyle HTML-Listen<\/figcaption><\/figure>\n\n\n\n
Mithilfe von wenig CSS-Code \u2026<\/p>\n\n\n\n
body {background: #07a; padding: 2%;}\n\n.inhalt {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: \"???? \";}\nol ::marker {font: bold 140% 'comic sans ms', cursive;}\n.zocken ::marker {content: \"???? \";}<\/pre>\n\n\n\n
\u2026 wird sich das schnell \u00e4ndern und du bekommst die gestylten Listen, wie im Vorschaubild ganz oben zu sehen.<\/p>\n\n\n\n
Und wie funktioniert das?<\/h2>\n\n\n\n
Das Pseudoelement ::marker<\/code><\/a> erm\u00f6glicht dir, die Listenzeichen zielgerichtet zu beeinflussen. Du kannst das Listenzeichen gezielt ansprechen und ihm eine andere Farbe, eine andere Schriftart oder -Gr\u00f6\u00dfe vergeben. In der Zeile 9 des CSS-Codes habe ich allen Listenzeichen eine blaue Farbe spendiert (#07a<\/code> \u2192 #0077aa<\/code>).<\/p>\n\n\n\n
\"CSS:
CSS: Individuelle Farbe bei den Listenzeichen<\/figcaption><\/figure>\n\n\n\n
Du kannst aber die Listenzeichen auch durch ein Symbol oder Emoji ersetzen. Das habe ich in den Zeile 10 und 12 realisiert. In unserem Beispiel w\u00e4hlte ich Einkaufwagen-Emoji und Controller-Emoji. Du kannst sogar noch viel weiter gehen und hier auch noch CSS-Animationen und Transitionen<\/a> einbauen.<\/p>\n\n\n\n
\"Individuelle
Mithilfe von CSS: Emojis und Sonderzeichen als Listenzeichen<\/figcaption><\/figure>\n\n\n\n
Die Browser-Unterst\u00fctzung<\/a> f\u00fcr ::marker<\/code> ist gut. Alle aktuellen Versionen von Firefox, Safari und den Chromium-Browsern (Chrome, Brave, Vivaldi, Opera, Edge) unterst\u00fctzen dieses Pseudoelement. <\/p>\n\n\n\n
Lediglich bei den Animationen und Transitionen scheinen Safari und Firefox f\u00fcr Android noch nicht mitzukommen.<\/p>\n\n\n\n
Falls du dir das Beispiel live ansehen m\u00f6chtest, so kannst du das auf der Code-Plattform CodePen<\/a> anschauen.<\/p>\n","protected":false},"excerpt":{"rendered":"
Im folgenden Blogartikel werde ich dir zeigen, wie du nur mit CSS die Listenzeichen individuell gestalten kannst. Es ist kein Grafikprogramm notwendig.<\/p>\n","protected":false},"author":191,"featured_media":98721,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[440],"tags":[768,769],"acf":[],"yoast_head":"\nListenzeichen mithilfe von CSS individuell gestalten<\/title>\n<meta name=\"description\" content=\"Im folgenden Blogartikel werde ich dir zeigen, wie du nur mit CSS die Listenzeichen individuell gestalten kannst. Es ist kein Grafikprogramm notwendig.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Listenzeichen mithilfe von CSS individuell gestalten\" \/>\n<meta property=\"og:description\" content=\"Im folgenden Blogartikel werde ich dir zeigen, wie du nur mit CSS die Listenzeichen individuell gestalten kannst. Es ist kein Grafikprogramm notwendig.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/listenzeichen-mithilfe-von-css-individuell-gestalten\/\" \/>\n<meta property=\"og:site_name\" content=\"STRATO Blog DE Staging\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/strato\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-07T07:25:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-07T07:33:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/06\/css-individuelle-listenzeichen.png\" \/>\n\t<meta property=\"og:image:width\" content=\"728\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vladimir Simovi\u0107\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Listenzeichen mithilfe von CSS individuell gestalten\" \/>\n<meta name=\"twitter:description\" content=\"Im folgenden Blogartikel werde ich dir zeigen, wie du nur mit CSS die Listenzeichen individuell gestalten kannst. Es ist kein Grafikprogramm notwendig.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/06\/css-individuelle-listenzeichen.png\" \/>\n<meta name=\"twitter:creator\" content=\"@vlad_perun\" \/>\n<meta name=\"twitter:site\" content=\"@STRATO_AG\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vladimir Simovi\u0107\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\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\":\"WebPage\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/listenzeichen-mithilfe-von-css-individuell-gestalten\/\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/listenzeichen-mithilfe-von-css-individuell-gestalten\/\",\"name\":\"Listenzeichen mithilfe von CSS individuell gestalten\",\"isPartOf\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website\"},\"datePublished\":\"2022-06-07T07:25:00+00:00\",\"dateModified\":\"2022-06-07T07:33:45+00:00\",\"author\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388\"},\"description\":\"Im folgenden Blogartikel werde ich dir zeigen, wie du nur mit CSS die Listenzeichen individuell gestalten kannst. Es ist kein Grafikprogramm notwendig.\",\"breadcrumb\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/listenzeichen-mithilfe-von-css-individuell-gestalten\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/listenzeichen-mithilfe-von-css-individuell-gestalten\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/listenzeichen-mithilfe-von-css-individuell-gestalten\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Listenzeichen mithilfe von CSS individuell gestalten\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/\",\"name\":\"STRATO Blog DE Staging\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388\",\"name\":\"Vladimir Simovi\u0107\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg\",\"contentUrl\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg\",\"caption\":\"Vladimir Simovi\u0107\"},\"description\":\"Vladimir Simovi\u0107 arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachb\u00fccher und Fachartikel publiziert. Seit April 2022 ist er als Senior Online-Redakteur f\u00fcr den Blog-Bereich von STRATO verantwortlich.\",\"sameAs\":[\"https:\/\/www.vladimir-simovic.de\",\"https:\/\/twitter.com\/vlad_perun\",\"https:\/\/de.wikipedia.org\/wiki\/Vladimir_Simovic\"],\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/author\/vladimir-simovic\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Listenzeichen mithilfe von CSS individuell gestalten","description":"Im folgenden Blogartikel werde ich dir zeigen, wie du nur mit CSS die Listenzeichen individuell gestalten kannst. Es ist kein Grafikprogramm notwendig.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"de_DE","og_type":"article","og_title":"Listenzeichen mithilfe von CSS individuell gestalten","og_description":"Im folgenden Blogartikel werde ich dir zeigen, wie du nur mit CSS die Listenzeichen individuell gestalten kannst. Es ist kein Grafikprogramm notwendig.","og_url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/listenzeichen-mithilfe-von-css-individuell-gestalten\/","og_site_name":"STRATO Blog DE Staging","article_publisher":"https:\/\/www.facebook.com\/strato","article_published_time":"2022-06-07T07:25:00+00:00","article_modified_time":"2022-06-07T07:33:45+00:00","og_image":[{"width":728,"height":410,"url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/06\/css-individuelle-listenzeichen.png","type":"image\/png"}],"author":"Vladimir Simovi\u0107","twitter_card":"summary_large_image","twitter_title":"Listenzeichen mithilfe von CSS individuell gestalten","twitter_description":"Im folgenden Blogartikel werde ich dir zeigen, wie du nur mit CSS die Listenzeichen individuell gestalten kannst. Es ist kein Grafikprogramm notwendig.","twitter_image":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/06\/css-individuelle-listenzeichen.png","twitter_creator":"@vlad_perun","twitter_site":"@STRATO_AG","twitter_misc":{"Verfasst von":"Vladimir Simovi\u0107","Gesch\u00e4tzte Lesezeit":"3 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/listenzeichen-mithilfe-von-css-individuell-gestalten\/","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/listenzeichen-mithilfe-von-css-individuell-gestalten\/","name":"Listenzeichen mithilfe von CSS individuell gestalten","isPartOf":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website"},"datePublished":"2022-06-07T07:25:00+00:00","dateModified":"2022-06-07T07:33:45+00:00","author":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388"},"description":"Im folgenden Blogartikel werde ich dir zeigen, wie du nur mit CSS die Listenzeichen individuell gestalten kannst. Es ist kein Grafikprogramm notwendig.","breadcrumb":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/listenzeichen-mithilfe-von-css-individuell-gestalten\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stg.blog-de.strato.wpcust.com\/blog\/listenzeichen-mithilfe-von-css-individuell-gestalten\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/listenzeichen-mithilfe-von-css-individuell-gestalten\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Listenzeichen mithilfe von CSS individuell gestalten"}]},{"@type":"WebSite","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/","name":"STRATO Blog DE Staging","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"Person","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388","name":"Vladimir Simovi\u0107","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg","contentUrl":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg","caption":"Vladimir Simovi\u0107"},"description":"Vladimir Simovi\u0107 arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachb\u00fccher und Fachartikel publiziert. Seit April 2022 ist er als Senior Online-Redakteur f\u00fcr den Blog-Bereich von STRATO verantwortlich.","sameAs":["https:\/\/www.vladimir-simovic.de","https:\/\/twitter.com\/vlad_perun","https:\/\/de.wikipedia.org\/wiki\/Vladimir_Simovic"],"url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/author\/vladimir-simovic\/"}]}},"_links":{"self":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/98719"}],"collection":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/users\/191"}],"replies":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/comments?post=98719"}],"version-history":[{"count":38,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/98719\/revisions"}],"predecessor-version":[{"id":98765,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/98719\/revisions\/98765"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/media\/98721"}],"wp:attachment":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/media?parent=98719"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/categories?post=98719"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/tags?post=98719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}