Wie mit 'symbols:' innerhalb von @counter-style SVGs einbinden

[MB]

moin,

Was ist jetzt der Unterschied zwischen maskieren und escapen? Aus dem URL-Kontext kommst du ja nicht heraus.

Sry ich meine damit \', \" usw.!

content: "\"Hallo, Fremder! Wie geht's\" - Ein Eremit"

oder

content: '"Hallo, Fremder! Wie geht\'s" - Ein Eremit'

< und > brauch man in meinem Fall nicht zu machen.

[…], dass all das, was durch url() importiert wurde, unveränderbar ist. […]

Das ist korrekt. […]

👍

Deshalb drängte sich mir die Frage auf, ob […] über url importierte SVGs doch zu stylen. […]

Das glaube ich zwar nicht, aber du könntest schauen, ob eine Icon-Font dir hier weiterhilft.

Du meinst z.B. fontawesome.com ein SVG vorab zu stylen 🤨??? Wenn ich deine AWs richtig deute versteht sich, dann kann ich natürlich in der url() die SVGs vor dem Import nach belieben verändern. Aber das will ich ja nicht! Ich will ja ein url() importierte SVG in verschiedener Form z.B. größe und Farbe darstellen. Wie gesagt, fals ich dich richtig verstanden habe 😉.

symbols: url('…') url('…') … ); habe ich ausprobiert und geht leeeider nicht 😭. Wäre zuuu schön gewesen. Da hat @Gunnar Bittersmann ein extrem GUTE Lösung gefunden so das man ein bisschen Dynamik in meinen Code einbauten kann 😀👍!!! So muss ich halt die Icons und Nummerierung leider so es lösen 😕…

Auszug:

    /* ...comment headers */

    .mb-snippet-header {     
      
      & h1:nth-of-type(1),
      .HyperMD-header-1:nth-child(1 of .HyperMD-header-1) > .cm-header-1 {
        &::after {
          -webkit-mask-image: var( --mb-icon-name );
          mask-image: var( --mb-icon-name );
        }
        &::before {
          content: "";
        }
      }
    }

    /* 1. Description */
    & h2[data-heading="Description"],
    .HyperMD-header-2:nth-child(1 of .HyperMD-header-2) > .cm-header-2 {
      &::after {
        -webkit-mask-image: var( --mb-icon-description );
        mask-image: var( --mb-icon-description );
      }
      &::before {
        content: "1. ";
      }
    }
 
    /* 1.1. Overview */
    & h3[data-heading="Overview"],
    .HyperMD-header-3:nth-child(1 of .HyperMD-header-3) > .cm-header-3 {
      &::after {
        -webkit-mask-image: var( --mb-icon-overview );
        mask-image: var( --mb-icon-overview );
      }
      &::before {
        content: "1.1. ";
      }
    }
    /* Weitere Einträge 44 */

…seeehr statisch. Passt mir absolut nicht, aber was soll man in meinem Fall anders machen 🤷.

lgmb