{"id":82073,"date":"2022-10-14T20:52:16","date_gmt":"2022-10-14T18:52:16","guid":{"rendered":"https:\/\/rmarketingdigital.com\/development\/vinetas-personalizadas-con-css-marcador\/"},"modified":"2020-09-16T14:55:23","modified_gmt":"2020-09-16T17:55:23","slug":"vinetas-personalizadas-con-css-marcador","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/de\/dev\/vinetas-personalizadas-con-css-marcador\/","title":{"rendered":"Benutzerdefinierte Aufz\u00e4hlungszeichen mit CSS :: Lesezeichen"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Inhaltsverzeichnis umschalten\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Umschalten<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/vinetas-personalizadas-con-css-marcador\/#Compatibilidad-del-navegador\" >Browser-Kompatibilit\u00e4t<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/vinetas-personalizadas-con-css-marcador\/#Pseudo-elementos\" >Pseudoelemente<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/vinetas-personalizadas-con-css-marcador\/#Creando-un-marcador\" >Lesezeichen erstellen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/vinetas-personalizadas-con-css-marcador\/#Peinar-un-marcador\" >Einen Marker k\u00e4mmen<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/vinetas-personalizadas-con-css-marcador\/#CSS-permitido-marker-Propiedades\" >Zul\u00e4ssige CSS :: marker-Eigenschaften<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/vinetas-personalizadas-con-css-marcador\/#Cambiar-el-contenido-de-un-marcador\" >\u00c4ndern Sie den Inhalt eines Lesezeichens<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/vinetas-personalizadas-con-css-marcador\/#Depuracion\" >Depuration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/vinetas-personalizadas-con-css-marcador\/#Estilo-futuro-de-pseudoelementos\" >Zuk\u00fcnftiger Stil von Pseudoelementen<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Es ist jetzt trivial, die Farbe, Gr\u00f6\u00dfe oder Art der Zahl oder des Aufz\u00e4hlungszeichens anzupassen, wenn Sie a verwenden <\/p>\n<ul> oder <\/p>\n<ol>.\n        <\/p>\n<p>\n          <time>2. September 2020<\/time><br \/>\n            Aktualisiert <time>2. September 2020<\/time>\n        <\/p>\n<\/header>\n<p>Dank der von Bloomberg gesponserten Igalia k\u00f6nnen wir endlich unsere Cheats f\u00fcr Style-Listen speichern. Uhr!<\/p>\n<figure class=\"w-figure\">\n  <img alt='marker-fun-1069220' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/marker-fun-1069220.png'><figcaption class=\"w-figcaption\">\n    <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/glitch.com\/edit\/#!\/marker-fun-example\">Quelltext anzeigen<\/a><br \/>\n  <\/figcaption><\/figure>\n<p>Dank an <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/css-lists-3\/#marker-pseudo\">CSS <code>:: marker<\/code><\/a>  Wir k\u00f6nnen den Inhalt und einige der Aufz\u00e4hlungs- und Zahlenstile \u00e4ndern.<\/p>\n<h2 id=\"browser-compatibilty\"><span class=\"ez-toc-section\" id=\"Compatibilidad-del-navegador\"><\/span>Browser-Kompatibilit\u00e4t <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wann <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.chromestatus.com\/features\/schedule\">Chromium 86-Versionen<\/a>, <code>:: marker<\/code> Es wird mit Firefox f\u00fcr Desktop und Android, Desktop Safari und iOS Safari sowie Chromium-basierten Desktop- und Android-Browsern kompatibel sein. Siehe MDN <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::marker#Browser_compatibility\">Browser-Kompatibilit\u00e4t<\/a> Tabelle aktualisieren.<\/p>\n<h2 id=\"pseudo-elements\"><span class=\"ez-toc-section\" id=\"Pseudo-elementos\"><\/span>Pseudoelemente <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Betrachten Sie die folgende wichtige HTML-Liste:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Lorem ipsum dolor sit amet consectetur adipisicing elit<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>li<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Dolores quaerat illo totam porro<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>li<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Quidem aliquid perferendis voluptates<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>li<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>li<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Abfluss<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>li<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>ul<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Was zu folgender nicht \u00fcberraschender Darstellung f\u00fchrt:<\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/marker-plain-list?path=style.css&amp;previewSize=100\" alt=\"List Demo on Glitch\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<p>Der Punkt am Anfang von jedem <code><li><\/code> Der Artikel ist kostenlos! Der Browser zeichnet und erstellt ein f\u00fcr Sie generiertes Markierungsfeld.<\/p>\n<p>Heute freuen wir uns, \u00fcber das zu sprechen <code>:: marker<\/code> Pseudo-Element, mit dem Sie das von Browsern f\u00fcr Sie erstellte Aufz\u00e4hlungselement entwerfen k\u00f6nnen.<\/p>\n<div class=\"w-aside w-aside--key-term\">\n<p><strong>Schl\u00fcsselbegriff:<\/strong><br \/>\nEin Pseudoelement repr\u00e4sentiert ein anderes Element des Dokuments als die im Dokumentbaum vorhandenen. Beispielsweise k\u00f6nnen Sie die erste Zeile eines Absatzes mit dem Pseudoelement ausw\u00e4hlen <code>p :: erste Zeile<\/code>, obwohl es kein HTML-Element gibt, das diese Textzeile umschlie\u00dft.<\/p>\n<\/div>\n<h3 id=\"creating-a-marker\"><span class=\"ez-toc-section\" id=\"Creando-un-marcador\"><\/span>Lesezeichen erstellen <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>das <code>:: marker<\/code> Das Pseudoelement-Markierungsfeld wird automatisch in jedem Element des Listenelements vor dem eigentlichen Inhalt und dem generiert <code>:: Vor<\/code> Pseudoelement.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">li::before<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">Inhalt<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">\"::before\"<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token property\">Hintergrund<\/span><span class=\"token punctuation\">:<\/span> lightgray<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">Randradius<\/span><span class=\"token punctuation\">:<\/span> 1ch<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">padding-inline<\/span><span class=\"token punctuation\">:<\/span> 1ch<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">margin-inline-end<\/span><span class=\"token punctuation\">:<\/span> 1ch<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/marker-before-example?path=style.css&amp;previewSize=100\" alt=\"List Demo on Glitch\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<p>In der Regel sind die Elemente in der Liste <code><li><\/code> HTML-Elemente, aber auch andere Elemente k\u00f6nnen mit in Listenelemente konvertiert werden <code>Anzeige: Listenelement<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>dl<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>dt<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Lorem<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>dt<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>dd<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Lorem ipsum dolor sit amet consectetur adipisicing elit<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>dd<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>dd<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Dolores quaerat illo totam porro<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>dd<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><p><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>dt<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Ipsum<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>dt<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>dd<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Quidem aliquid perferendis voluptates<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>dd<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>dl<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"highlight-line\"><span class=\"token selector\">dd<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token property\">Anzeige<\/span><span class=\"token punctuation\">:<\/span> list-item<span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\">  <span class=\"token property\">Listenstil-Typ<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">\"\ud83e\udd2f\"<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token property\">padding-inline-start<\/span><span class=\"token punctuation\">:<\/span> 1ch<span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/marker-definition-list?path=style.css&amp;previewSize=100\" alt=\"List Demo on Glitch\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<h3 id=\"styling-a-marker\"><span class=\"ez-toc-section\" id=\"Peinar-un-marcador\"><\/span>Einen Marker k\u00e4mmen <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Bis um <code>:: marker<\/code>Listen k\u00f6nnen mit erstellt werden <code>Listenstil-Typ<\/code> y <code>Listenstil-Bild<\/code> So \u00e4ndern Sie das Symbol des Listenelements mit 1 Zeile CSS:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">li<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">Listenstil-Bild<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token url\"><span class=\"token function\">URL<\/span><span class=\"token punctuation\">(<\/span>\/right-arrow.svg<span class=\"token punctuation\">)<\/span><\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token property\">Listenstil-Typ<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">'\ud83d\udc49'<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token property\">padding-inline-start<\/span><span class=\"token punctuation\">:<\/span> 1ch<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/marker-list-style-type?path=style.css&amp;previewSize=100\" alt=\"List Demo on Glitch\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<p>Das ist n\u00fctzlich, aber wir brauchen mehr. Wie w\u00e4re es mit einer \u00c4nderung von Farbe, Gr\u00f6\u00dfe, Abstand usw.? Das ist wo <code>:: marker<\/code> kommt zur Rettung. Erm\u00f6glicht das individuelle und globale Targeting dieser CSS-Pseudoelemente:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">li::marker<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">Farbe<\/span><span class=\"token punctuation\">:<\/span> hotpink<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><p><span class=\"token selector\">li:first-child::marker<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 5rem<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/marker-style-introduction?path=style.css&amp;previewSize=100\" alt=\"List Demo on Glitch\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<div class=\"w-aside w-aside--caution\">\n<p><strong>Vorsicht:<\/strong><br \/>\nWenn die obige Liste keine rosa Kugeln enth\u00e4lt, dann <code>:: marker<\/code> Es ist nicht mit Ihrem Browser kompatibel.<\/p>\n<\/div>\n<p>das <code>Listenstil-Typ<\/code> Das Anwesen bietet nur sehr begrenzte Gestaltungsm\u00f6glichkeiten. das <code>:: marker<\/code> Pseudoelement bedeutet, dass Sie auf den Marker selbst zeigen und ihn direkt formatieren k\u00f6nnen. Dies erm\u00f6glicht mehr Kontrolle.<\/p>\n<p>Davon abgesehen k\u00f6nnen Sie nicht alle CSS-Eigenschaften in a verwenden <code>:: marker<\/code>. Die Liste der zul\u00e4ssigen und nicht zul\u00e4ssigen Eigenschaften ist in der Spezifikation deutlich angegeben. Wenn Sie mit diesem Pseudoelement etwas Cooles ausprobieren und es nicht funktioniert, ist die folgende Liste Ihr Leitfaden daf\u00fcr, was mit CSS getan werden kann und was nicht:<\/p>\n<h4 id=\"allowed-css-::marker-properties\"><span class=\"ez-toc-section\" id=\"CSS-permitido-marker-Propiedades\"><\/span>CSS erlaubt <code>:: marker<\/code> Eigenschaften <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li><code>Animation- *<\/code><\/li>\n<li><code>\u00dcberleitung- *<\/code><\/li>\n<li><code>Farbe<\/code><\/li>\n<li><code>Richtung<\/code><\/li>\n<li><code>font- *<\/code><\/li>\n<li><code>Inhalt<\/code><\/li>\n<li><code>Unicode-Bidi<\/code><\/li>\n<li><code>Leerraum<\/code><\/li>\n<\/ul>\n<p>\u00c4ndern Sie den Inhalt von a <code>:: marker<\/code> Es ist gemacht mit <code>Inhalt<\/code> gegen\u00fcber <code>Listenstil-Typ<\/code>. Im folgenden Beispiel wird der Stil des ersten Elements verwendet <code>Listenstil-Typ<\/code> und der zweite mit <code>:: marker<\/code>. Die Eigenschaften im ersten Fall gelten f\u00fcr das gesamte Element in der Liste, nicht nur f\u00fcr die Markierung. Dies bedeutet, dass der Text genau wie die Markierung animiert wird. Wenn Sie verwenden <code>:: marker<\/code> Wir k\u00f6nnen nur auf das Markierungsfeld und nicht auf den Text zeigen.<\/p>\n<p>Beachten Sie auch, wie das nicht erlaubt ist <code>Hintergrund<\/code> Eigentum hat keine Wirkung.<\/p>\n<div class=\"w-columns\">\n<figure class=\"w-compare\">\n<p class=\"w-compare__label w-compare__label--worse\">\n<p>    Listenstile\n  <\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">li:nth-child(1)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">Listenstil-Typ<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">'?'<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 2rem<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">Hintergrund<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">hsl<\/span><span class=\"token punctuation\">(<\/span>200 20% 88%<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token property\">animation<\/span><span class=\"token punctuation\">:<\/span> color-change 3s ease-in-out infinite<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><figcaption class=\"w-compare__caption\">\n<p>  Gemischte Ergebnisse zwischen Lesezeichen und Listenelement <\/p>\n<\/figcaption><\/figure>\n<figure class=\"w-compare\">\n<p class=\"w-compare__label w-compare__label--better\">\n<p>    Markierungsstile\n  <\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">li:nth-child(2)::marker<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">Inhalt<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">'!'<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 2rem<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">Hintergrund<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">hsl<\/span><span class=\"token punctuation\">(<\/span>200 20% 88%<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token property\">animation<\/span><span class=\"token punctuation\">:<\/span> color-change 3s ease-in-out infinite<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><figcaption class=\"w-compare__caption\">\n<p>  Die Ergebnisse konzentrierten sich auf Marker und Listenelement <\/p>\n<\/figcaption><\/figure>\n<\/div>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/marker-style-vs-list-style-type?path=style.css&amp;previewSize=100\" alt=\"List Demo on Glitch\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<div class=\"w-aside w-aside--gotchas\">\n<strong>Fallstricke!<\/strong> <\/p>\n<p>In Chrom, <code>Leerraum<\/code> funktioniert nur f\u00fcr darin platzierte Marker. Bei au\u00dfen angebrachten Markierungen erzwingt der Stileinsteller immer <code>Leerraum: vor<\/code> um den endg\u00fcltigen Raum zu erhalten.<\/p>\n<\/div>\n<h4 id=\"changing-the-content-of-a-marker\"><span class=\"ez-toc-section\" id=\"Cambiar-el-contenido-de-un-marcador\"><\/span>\u00c4ndern Sie den Inhalt eines Lesezeichens <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Dies sind einige der M\u00f6glichkeiten, wie Sie Ihre Lesezeichen gestalten k\u00f6nnen.<\/p>\n<p><strong>\u00c4ndern Sie alle Elemente in der Liste<\/strong><\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">li<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">Listenstil-Typ<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">\"\ud83d\ude0d\"<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><p><span class=\"token selector\">li::marker<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">Inhalt<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">\"\ud83d\ude0d\"<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/marker-change-all?path=style.css&amp;previewSize=100\" alt=\"List Demo on Glitch\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<p><strong>\u00c4ndern Sie nur ein Element in der Liste<\/strong><\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">li:last-child::marker<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">Inhalt<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">\"\ud83d\ude0d\"<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/marker-change-one?path=style.css&amp;previewSize=100\" alt=\"List Demo on Glitch\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<p><strong>\u00c4ndern Sie ein Listenelement in SVG<\/strong><\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">li::marker<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">Inhalt<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token url\"><span class=\"token function\">URL<\/span><span class=\"token punctuation\">(<\/span>\/heart.svg<span class=\"token punctuation\">)<\/span><\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token property\">Inhalt<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token url\"><span class=\"token function\">URL<\/span><span class=\"token punctuation\">(<\/span>#heart<span class=\"token punctuation\">)<\/span><\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token property\">Inhalt<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token url\"><span class=\"token function\">URL<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string url\">\"data:image\/svg+xml;charset=UTF-8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' version='1.1' height='24' width='24'&gt;&lt;path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'\/&gt;&lt;\/svg&gt;\"<\/span><span class=\"token punctuation\">)<\/span><\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/marker-inline-svg?path=style.css&amp;previewSize=100\" alt=\"List Demo on Glitch\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<p><strong>Nummerierte Listen \u00e4ndern<\/strong><br \/>Wie w\u00e4re es mit einer <code><ol><\/code> selbst wenn? Die Markierung in einem geordneten Listenelement ist standardm\u00e4\u00dfig eine Zahl und kein Aufz\u00e4hlungszeichen. In CSS werden diese aufgerufen <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Lists_and_Counters\/Using_CSS_counters\">Buchhalter<\/a>und sie sind ziemlich m\u00e4chtig. Sie haben sogar Eigenschaften, mit denen Sie festlegen und zur\u00fccksetzen k\u00f6nnen, wo die Zahl beginnt und endet, oder sie in r\u00f6mische Ziffern \u00e4ndern k\u00f6nnen. K\u00f6nnen wir das entwerfen? Ja, und wir k\u00f6nnen sogar den Wert des Lesezeicheninhalts verwenden, um unsere eigene Nummerierungspr\u00e4sentation zu erstellen.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">li::marker<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">Inhalt<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">counter<\/span><span class=\"token punctuation\">(<\/span>list-item<span class=\"token punctuation\">)<\/span> <span class=\"token string\">\"\u203a \"<\/span><span class=\"token punctuation\">;<\/span> <br><span class=\"token property\">Farbe<\/span><span class=\"token punctuation\">:<\/span> hotpink<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/marker-numbered-lists?path=style.css&amp;previewSize=100\" alt=\"List Demo on Glitch\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<h3 id=\"debugging\"><span class=\"ez-toc-section\" id=\"Depuracion\"><\/span>Depuration <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Chrome DevTools hilft Ihnen beim \u00dcberpr\u00fcfen, Debuggen und \u00c4ndern der angewendeten Stile <code>:: marker<\/code> Pseudoelemente.<\/p>\n<figure class=\"w-figure\">\n  <img alt='devtools-1804244' class=\"w-screenshot\" style=\"max-inline-size: 480px\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/devtools-1804244.png'><br \/>\n<\/figure>\n<h3 id=\"future-pseudo-element-styling\"><span class=\"ez-toc-section\" id=\"Estilo-futuro-de-pseudoelementos\"><\/span>Zuk\u00fcnftiger Stil von Pseudoelementen <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Weitere Informationen zu :: marker erhalten Sie unter:<\/p>\n<p>Es ist gro\u00dfartig, Zugang zu etwas zu haben, das schwer zu entwerfen war. M\u00f6glicherweise m\u00f6chten Sie in der Lage sein, andere automatisch generierte Elemente zu entwerfen. Sie k\u00f6nnten frustriert sein <code><details><\/code> oder das Flag f\u00fcr die automatische Vervollst\u00e4ndigung der Sucheingabe, Dinge, die nicht in allen Browsern gleich implementiert sind. Eine M\u00f6glichkeit, das zu teilen, was Sie ben\u00f6tigen, besteht darin, einen Wunsch in zu erstellen <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/webwewant.fyi\">https:\/\/webwewant.fyi<\/a>.<\/p>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>Es ist jetzt trivial, die Farbe, Gr\u00f6\u00dfe oder Art der Zahl oder des Aufz\u00e4hlungszeichens anzupassen, wenn ein oder verwendet wird. 2. September 2020 Aktualisiert 2. September ...<\/p>","protected":false},"author":1,"featured_media":82074,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-82073","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Vi\u00f1etas personalizadas con CSS :: marcador - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Ahora es trivial personalizar el color, el tama\u00f1o o el tipo de n\u00famero o vi\u00f1eta cuando se usa un o . 2 de septiembre de 2020 Actualizado 2 de septiembre de\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vi\u00f1etas personalizadas con CSS :: marcador\" \/>\n<meta property=\"og:description\" content=\"Ahora es trivial personalizar el color, el tama\u00f1o o el tipo de n\u00famero o vi\u00f1eta cuando se usa un o . 2 de septiembre de 2020 Actualizado 2 de septiembre de\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/de\/dev\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-14T18:52:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumb-7386950.png\" \/>\n\t<meta property=\"og:image:width\" content=\"376\" \/>\n\t<meta property=\"og:image:height\" content=\"240\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Vi\u00f1etas personalizadas con CSS :: marcador\",\"datePublished\":\"2022-10-14T18:52:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\\\/\"},\"wordCount\":816,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/thumb-7386950.png\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\\\/\",\"name\":\"Vi\u00f1etas personalizadas con CSS :: marcador - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/thumb-7386950.png\",\"datePublished\":\"2022-10-14T18:52:16+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Ahora es trivial personalizar el color, el tama\u00f1o o el tipo de n\u00famero o vi\u00f1eta cuando se usa un o . 2 de septiembre de 2020 Actualizado 2 de septiembre de\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/thumb-7386950.png\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/thumb-7386950.png\",\"width\":376,\"height\":240,\"caption\":\"thumb-7386950-7329394-png\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Vi\u00f1etas personalizadas con CSS :: marcador - R Marketing Digital","description":"Es ist jetzt trivial, die Farbe, Gr\u00f6\u00dfe oder Art der Zahl oder des Aufz\u00e4hlungszeichens anzupassen, wenn Sie ein oder verwenden. 2. September 2020 Aktualisiert 2. September,","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:\/\/rmarketingdigital.com\/de\/dev\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\/","og_locale":"de_DE","og_type":"article","og_title":"Vi\u00f1etas personalizadas con CSS :: marcador","og_description":"Ahora es trivial personalizar el color, el tama\u00f1o o el tipo de n\u00famero o vi\u00f1eta cuando se usa un o . 2 de septiembre de 2020 Actualizado 2 de septiembre de","og_url":"https:\/\/rmarketingdigital.com\/de\/dev\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\/","og_site_name":"R Marketing Digital","article_published_time":"2022-10-14T18:52:16+00:00","og_image":[{"width":376,"height":240,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumb-7386950.png","type":"image\/png"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Vi\u00f1etas personalizadas con CSS :: marcador","datePublished":"2022-10-14T18:52:16+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\/"},"wordCount":816,"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumb-7386950.png","articleSection":["Dev"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\/","url":"https:\/\/rmarketingdigital.com\/de\/dev\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\/","name":"Vi\u00f1etas personalizadas con CSS :: marcador - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumb-7386950.png","datePublished":"2022-10-14T18:52:16+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Es ist jetzt trivial, die Farbe, Gr\u00f6\u00dfe oder Art der Zahl oder des Aufz\u00e4hlungszeichens anzupassen, wenn Sie ein oder verwenden. 2. September 2020 Aktualisiert 2. September,","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/de\/dev\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumb-7386950.png","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumb-7386950.png","width":376,"height":240,"caption":"thumb-7386950-7329394-png"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digitales Marketing","description":"SEO Agentur | Werbung f\u00fcr soziale Netzwerke | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digitales Marketing","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/82073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/comments?post=82073"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/82073\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media\/82074"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media?parent=82073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/categories?post=82073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/tags?post=82073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}