{"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\/fr\/dev\/vinetas-personalizadas-con-css-marcador\/","title":{"rendered":"Puces personnalis\u00e9es avec CSS :: bookmark"},"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\">Table des mati\u00e8res<\/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=\"Basculer la table des mati\u00e8res\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Basculer<\/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\/fr\/dev\/vinetas-personalizadas-con-css-marcador\/#Compatibilidad-del-navegador\" >Compatibilit\u00e9 du navigateur<\/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\/fr\/dev\/vinetas-personalizadas-con-css-marcador\/#Pseudo-elementos\" >Pseudo-\u00e9l\u00e9ments<\/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\/fr\/dev\/vinetas-personalizadas-con-css-marcador\/#Creando-un-marcador\" >Cr\u00e9er un signet<\/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\/fr\/dev\/vinetas-personalizadas-con-css-marcador\/#Peinar-un-marcador\" >Peigner un marqueur<\/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\/fr\/dev\/vinetas-personalizadas-con-css-marcador\/#CSS-permitido-marker-Propiedades\" >Propri\u00e9t\u00e9s CSS :: marker autoris\u00e9es<\/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\/fr\/dev\/vinetas-personalizadas-con-css-marcador\/#Cambiar-el-contenido-de-un-marcador\" >Modifier le contenu d&#039;un signet<\/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\/fr\/dev\/vinetas-personalizadas-con-css-marcador\/#Depuracion\" >D\u00e9puration<\/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\/fr\/dev\/vinetas-personalizadas-con-css-marcador\/#Estilo-futuro-de-pseudoelementos\" >Style futur des pseudo-\u00e9l\u00e9ments<\/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>          Il est d\u00e9sormais simple de personnaliser la couleur, la taille ou le type de num\u00e9ro ou de puce lors de l&#039;utilisation d&#039;un <\/p>\n<ul> ou <\/p>\n<ol>.\n        <\/p>\n<p>\n          <time>2 septembre 2020<\/time><br \/>\n            Mise \u00e0 jour <time>2 septembre 2020<\/time>\n        <\/p>\n<\/header>\n<p>Gr\u00e2ce \u00e0 Igalia sponsoris\u00e9 par Bloomberg, nous pouvons enfin enregistrer nos astuces pour les listes de styles. Regarder!<\/p>\n<figure class=\"w-figure\">\n  <img alt='marqueur-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\">Voir la source<\/a><br \/>\n  <\/figcaption><\/figure>\n<p>Gr\u00e2ce \u00e0 <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/css-lists-3\/#marker-pseudo\">CSS <code>:: marqueur<\/code><\/a>  nous pouvons changer le contenu et certains styles de puces et de nombres.<\/p>\n<h2 id=\"browser-compatibilty\"><span class=\"ez-toc-section\" id=\"Compatibilidad-del-navegador\"><\/span>Compatibilit\u00e9 du navigateur <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Lorsque <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.chromestatus.com\/features\/schedule\">Versions de Chrome 86<\/a>, <code>:: marqueur<\/code> il sera compatible avec Firefox pour ordinateur de bureau et Android, Safari de bureau et Safari iOS, et les navigateurs de bureau et Android bas\u00e9s sur Chromium. Voir MDN <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::marker#Browser_compatibility\">Compatibilit\u00e9 du navigateur<\/a> table de mise \u00e0 jour.<\/p>\n<h2 id=\"pseudo-elements\"><span class=\"ez-toc-section\" id=\"Pseudo-elementos\"><\/span>Pseudo-\u00e9l\u00e9ments <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Consid\u00e9rez la liste d\u00e9sordonn\u00e9e HTML essentielle suivante:<\/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>Drain<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>Ce qui aboutit \u00e0 la repr\u00e9sentation sans surprise suivante:<\/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>Le point au d\u00e9but de chaque <code><li><\/code> L&#039;article est gratuit! Le navigateur dessine et cr\u00e9e une bo\u00eete de marqueurs g\u00e9n\u00e9r\u00e9e pour vous.<\/p>\n<p>Aujourd&#039;hui, nous sommes ravis de parler de la <code>:: marqueur<\/code> pseudo-\u00e9l\u00e9ment, qui vous donne la possibilit\u00e9 de concevoir l&#039;\u00e9l\u00e9ment de puce que les navigateurs cr\u00e9ent pour vous.<\/p>\n<div class=\"w-aside w-aside--key-term\">\n<p><strong>Terme cl\u00e9:<\/strong><br \/>\nUn pseudo-\u00e9l\u00e9ment repr\u00e9sente un \u00e9l\u00e9ment du document autre que ceux qui existent dans l&#039;arborescence du document. Par exemple, vous pouvez s\u00e9lectionner la premi\u00e8re ligne d&#039;un paragraphe \u00e0 l&#039;aide du pseudo-\u00e9l\u00e9ment <code>p :: premi\u00e8re ligne<\/code>, bien qu&#039;il n&#039;y ait pas d&#039;\u00e9l\u00e9ment HTML qui encapsule cette ligne de texte.<\/p>\n<\/div>\n<h3 id=\"creating-a-marker\"><span class=\"ez-toc-section\" id=\"Creando-un-marcador\"><\/span>Cr\u00e9er un signet <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Les <code>:: marqueur<\/code> La zone de marqueur de pseudo-\u00e9l\u00e9ment est automatiquement g\u00e9n\u00e9r\u00e9e dans chaque \u00e9l\u00e9ment de l&#039;\u00e9l\u00e9ment de liste, avant le contenu r\u00e9el et le <code>:: avant que<\/code> pseudo-\u00e9l\u00e9ment.<\/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\">contenu<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">\"::before\"<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token property\">Contexte<\/span><span class=\"token punctuation\">:<\/span> lightgray<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">rayon de la fronti\u00e8re<\/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>En r\u00e8gle g\u00e9n\u00e9rale, les \u00e9l\u00e9ments de la liste sont <code><li><\/code> Les \u00e9l\u00e9ments HTML, mais d&#039;autres \u00e9l\u00e9ments peuvent \u00e9galement \u00eatre convertis en \u00e9l\u00e9ments de liste avec <code>affichage: \u00e9l\u00e9ment de liste<\/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\">affichage<\/span><span class=\"token punctuation\">:<\/span> list-item<span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\">  <span class=\"token property\">type de liste<\/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>Peigner un marqueur <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Jusqu&#039;\u00e0 ce que <code>:: marqueur<\/code>, les listes peuvent \u00eatre con\u00e7ues en utilisant <code>type de liste<\/code> y <code>image-style-liste<\/code> Pour changer le symbole de l&#039;\u00e9l\u00e9ment de liste avec 1 ligne de 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\">image-style-liste<\/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\">type de liste<\/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>C&#039;est utile, mais nous avons besoin de plus. Que diriez-vous de changer la couleur, la taille, l&#039;espacement, etc.? C&#039;est l\u00e0 o\u00f9 <code>:: marqueur<\/code> vient \u00e0 la rescousse. Permet un ciblage individuel et global de ces pseudo-\u00e9l\u00e9ments CSS:<\/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\">Couleur<\/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>Mise en garde:<\/strong><br \/>\nSi la liste ci-dessus ne contient pas de puces roses, alors <code>:: marqueur<\/code> il n&#039;est pas compatible avec votre navigateur.<\/p>\n<\/div>\n<p>Les <code>type de liste<\/code> La propri\u00e9t\u00e9 offre des possibilit\u00e9s de style tr\u00e8s limit\u00e9es. Les <code>:: marqueur<\/code> pseudo \u00e9l\u00e9ment signifie que vous pouvez pointer vers le marqueur lui-m\u00eame et le styliser directement. Cela permet plus de contr\u00f4le.<\/p>\n<p>Cela \u00e9tant dit, vous ne pouvez pas utiliser toutes les propri\u00e9t\u00e9s CSS dans un <code>:: marqueur<\/code>. La liste des propri\u00e9t\u00e9s autoris\u00e9es et non autoris\u00e9es est clairement indiqu\u00e9e dans la sp\u00e9cification. Si vous essayez quelque chose de cool avec ce pseudo-\u00e9l\u00e9ment et que cela ne fonctionne pas, la liste ci-dessous est votre guide sur ce qui peut et ne peut pas \u00eatre fait avec CSS:<\/p>\n<h4 id=\"allowed-css-::marker-properties\"><span class=\"ez-toc-section\" id=\"CSS-permitido-marker-Propiedades\"><\/span>CSS autoris\u00e9 <code>:: marqueur<\/code> Propri\u00e9t\u00e9s <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li><code>animation- *<\/code><\/li>\n<li><code>transition- *<\/code><\/li>\n<li><code>Couleur<\/code><\/li>\n<li><code>direction<\/code><\/li>\n<li><code>Police de caract\u00e8re- *<\/code><\/li>\n<li><code>contenu<\/code><\/li>\n<li><code>unicode-bidi<\/code><\/li>\n<li><code>espace blanc<\/code><\/li>\n<\/ul>\n<p>Changer le contenu d&#039;un <code>:: marqueur<\/code> C&#039;est fait avec <code>contenu<\/code> l&#039;oppos\u00e9 de <code>type de liste<\/code>. Dans l&#039;exemple suivant, le style du premier \u00e9l\u00e9ment est utilis\u00e9 <code>type de liste<\/code> et le second avec <code>:: marqueur<\/code>. Les propri\u00e9t\u00e9s dans le premier cas s&#039;appliquent \u00e0 l&#039;ensemble de l&#039;\u00e9l\u00e9ment de la liste, pas seulement au marqueur, ce qui signifie que le texte est anim\u00e9 comme le marqueur. Lorsque vous utilisez <code>:: marqueur<\/code> nous ne pouvons pointer que sur la zone de marqueur et non sur le texte.<\/p>\n<p>Notez \u00e9galement comment les <code>Contexte<\/code> la propri\u00e9t\u00e9 n&#039;a aucun effet.<\/p>\n<div class=\"w-columns\">\n<figure class=\"w-compare\">\n<p class=\"w-compare__label w-compare__label--worse\">\n<p>    Styles de liste\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\">type de liste<\/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\">Contexte<\/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>  R\u00e9sultats mitig\u00e9s entre le signet et l&#039;\u00e9l\u00e9ment de liste <\/p>\n<\/figcaption><\/figure>\n<figure class=\"w-compare\">\n<p class=\"w-compare__label w-compare__label--better\">\n<p>    Styles de marqueurs\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\">contenu<\/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\">Contexte<\/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>  R\u00e9sultats focalis\u00e9s entre le marqueur et l&#039;\u00e9l\u00e9ment de liste <\/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>Gotchas!<\/strong> <\/p>\n<p>En chrome, <code>espace blanc<\/code> ne fonctionne que pour les marqueurs plac\u00e9s \u00e0 l&#039;int\u00e9rieur. Pour les marqueurs plac\u00e9s \u00e0 l&#039;ext\u00e9rieur, le r\u00e9gleur de style force toujours <code>espace blanc: pr\u00e9<\/code> pour pr\u00e9server l&#039;espace final.<\/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>Modifier le contenu d&#039;un signet <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Voici quelques-unes des fa\u00e7ons dont vous pouvez concevoir vos signets.<\/p>\n<p><strong>Modifier tous les \u00e9l\u00e9ments de la 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\">type de liste<\/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\">contenu<\/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>Modifier un seul \u00e9l\u00e9ment de la 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\">contenu<\/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>Changer un \u00e9l\u00e9ment de liste en 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\">contenu<\/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\">contenu<\/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\">contenu<\/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>Modification des listes num\u00e9rot\u00e9es<\/strong><br \/>Que diriez-vous d&#039;un <code><ol><\/code> m\u00eame si? Le marqueur dans un \u00e9l\u00e9ment de liste ordonn\u00e9e est un nombre et non une puce par d\u00e9faut. En CSS, ils sont appel\u00e9s <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Lists_and_Counters\/Using_CSS_counters\">Comptables<\/a>et ils sont assez puissants. Ils ont m\u00eame des propri\u00e9t\u00e9s pour d\u00e9finir et r\u00e9initialiser le d\u00e9but et la fin du nombre, ou les changer en chiffres romains. Pouvons-nous concevoir cela? Oui, et nous pouvons m\u00eame utiliser la valeur du contenu du signet pour cr\u00e9er notre propre pr\u00e9sentation de num\u00e9rotation.<\/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\">contenu<\/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\">Couleur<\/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>D\u00e9puration <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Chrome DevTools est pr\u00eat \u00e0 vous aider \u00e0 inspecter, d\u00e9boguer et modifier les styles appliqu\u00e9s \u00e0 <code>:: marqueur<\/code> pseudo \u00e9l\u00e9ments.<\/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>Style futur des pseudo-\u00e9l\u00e9ments <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Vous pouvez obtenir plus d&#039;informations sur :: marker \u00e0 l&#039;adresse:<\/p>\n<p>C&#039;est formidable d&#039;avoir acc\u00e8s \u00e0 quelque chose qui a \u00e9t\u00e9 difficile \u00e0 concevoir. Vous souhaiterez peut-\u00eatre \u00eatre en mesure de concevoir d&#039;autres \u00e9l\u00e9ments g\u00e9n\u00e9r\u00e9s automatiquement. Vous pourriez \u00eatre frustr\u00e9 par <code><details><\/code> ou l&#039;indicateur de saisie semi-automatique de l&#039;entr\u00e9e de recherche, les choses qui ne sont pas impl\u00e9ment\u00e9es de la m\u00eame mani\u00e8re dans tous les navigateurs. Une fa\u00e7on de partager ce dont vous avez besoin est de cr\u00e9er un souhait <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>Il est d\u00e9sormais simple de personnaliser la couleur, la taille ou le type de chiffre ou de puce lorsque vous utilisez un ou . 2 septembre 2020 Mis \u00e0 jour le 2 septembre\u2026<\/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\/fr\/dev\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\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\/fr\/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\":\"fr-FR\"},{\"@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\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@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\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@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":"Puces personnalis\u00e9es avec CSS :: marker - R Marketing Digital","description":"Il est d\u00e9sormais simple de personnaliser la couleur, la taille ou le type de nombre ou de puce lors de l&#039;utilisation d&#039;un fichier ou. 2 septembre 2020 Mis \u00e0 jour le 2 septembre","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\/fr\/dev\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\/","og_locale":"fr_FR","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\/fr\/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":"fr-FR"},{"@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":"Puces personnalis\u00e9es avec CSS :: marker - 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":"Il est d\u00e9sormais simple de personnaliser la couleur, la taille ou le type de nombre ou de puce lors de l&#039;utilisation d&#039;un fichier ou. 2 septembre 2020 Mis \u00e0 jour le 2 septembre","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/de\/dev\/benutzerdefinierte-registerkarten-mit-css-lesezeichen\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@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":"Marketing num\u00e9rique","description":"Agence de r\u00e9f\u00e9rencement | Publicit\u00e9 sur les r\u00e9seaux sociaux | Gestion de communaut\u00e9","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":"fr-FR"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"Marketing num\u00e9rique","image":{"@type":"ImageObject","inLanguage":"fr-FR","@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\/fr\/wp-json\/wp\/v2\/posts\/82073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/comments?post=82073"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/82073\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media\/82074"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=82073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/categories?post=82073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/tags?post=82073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}