[FEATURE] pseudo ::before and ::after element styling

[TDuffinNTU]

Describe your feature request We currently have an issue with mis-aligned list-item prefixes that would require me to style them. Here's an example of the issue in case I've missed something :)

I've noticed that ::before and ::after pseudo elements don't appear to do apply any styles at all when mapped.

Additional context the style property of our Html.fromDom widget:

        style: {
          'body': Style(padding: EdgeInsets.zero, margin: padding),
          '.banner': Style(display: Display.NONE),
          'tbody > :first-child': Style.fromTextStyle(
            CustomTheme.of(context).textTheme.headlineMedium,
          ),
          'td': Style.fromTextStyle(CustomTheme.of(context).textTheme.bodyLarge).copyWith(
            padding: const EdgeInsets.symmetric(horizontal: Spacing.l),
            width: tableCellMaxWidth,
            display: Display.INLINE_BLOCK,
            verticalAlign: VerticalAlign.SUPER,
            textAlign: TextAlign.start,
            alignment: Alignment.topLeft,
          ),
          'table img': Style(
            padding: const EdgeInsets.all(Spacing.s),
            display: Display.INLINE,
          ),
          'th': Style.fromTextStyle(CustomTheme.of(context).textTheme.headlineMedium).copyWith(
            padding: const EdgeInsets.all(Spacing.l),
            width: tableCellMaxWidth,
            display: Display.INLINE_BLOCK,
            verticalAlign: VerticalAlign.SUPER,
            textAlign: TextAlign.start,
            alignment: Alignment.topCenter,
          ),
          'p': Style.fromTextStyle(CustomTheme.of(context).textTheme.bodyLarge),
          'a': Style.fromTextStyle(CustomTheme.of(context).textTheme.bodyLargeLink),
          'h1': Style.fromTextStyle(CustomTheme.of(context).textTheme.headlineLarge),
          'h2': Style.fromTextStyle(CustomTheme.of(context).textTheme.headlineMedium),
          'h3': Style.fromTextStyle(CustomTheme.of(context).textTheme.titleLarge),
          'h4': Style.fromTextStyle(CustomTheme.of(context).textTheme.titleMedium),
          'li::before': Style.fromTextStyle(CustomTheme.of(context).textTheme.headlineLarge)
              .copyWith(color: Colors.amber),   
        },

A picture of a cute animal (not mandatory but encouraged) this is francois, a good boy who has one (1) brain cell made of shrimp

[f1dz]

When I set dark mode, the list number won't change to the expected color as well. The code is as follows:

style: {
        "body": Style(
          fontSize: const FontSize(16.0),
          margin: const EdgeInsets.only(left: 20, right: 20, top: 8, bottom: 8),
          color: Theme.of(context).scaffoldBackgroundColor.computeLuminance() > 0.5
              ? Colors.black
              : Colors.white,
        ),
        "ol": Style(
          color: Theme.of(context).scaffoldBackgroundColor.computeLuminance() > 0.5
              ? Colors.black
              : Colors.white,
        ),
        "ul": Style(
          color: Theme.of(context).scaffoldBackgroundColor.computeLuminance() > 0.5
              ? Colors.black
              : Colors.white,
        ),
        "li": Style(
          color: Theme.of(context).scaffoldBackgroundColor.computeLuminance() > 0.5
              ? Colors.black
              : Colors.white,
        )
}

Any help will be much appreciated