list-item inline pseudo `::after` element renders incorrectly in the editor

[djcowan]

Description

Adding an inline/inline-block pseudo ::after element to a list-item renders incorrectly in the editor due to the inclusion of the "list text" div within the 'RichText' element.within the Editor.

Possibly related 22834

Step-by-step reproduction instructions

To recreate the issue;

1. add an inline or inline-block pseudo ::after element via css to a core/list-item.
2. note the element appears on the same line as the list-item text on the public front end
3. note the element appears on the following line within the editor due to the inclusion of the 'list text' div

Styles used to generate screenshots:

\register_block_style( 
    'core/list-item' , 
    array(
        'default'      => false,
        'name'         => 'acme-list',
        'lable'         => 'ACME List',
        'inline_style' => '.is-style-acme-list { position: relative; } .is-style-acme-list::after { content: "This is a fancy orange box."; background-color: #ffba10; } '
    )
);

Screenshots, screen recording, code snippet

public:

page editor

editor insector code

<li tabindex="0" class="block-editor-block-list__block wp-block is-selected is-style-acme-list is-style-acme-list-6331769d-ce86-406f-a038-b87f0e962fce wp-block-list-item block-editor-block-list__layout" id="block-6331769d-ce86-406f-a038-b87f0e962fce" role="document" aria-label="Block: List item" data-block="6331769d-ce86-406f-a038-b87f0e962fce" data-type="core/list-item" data-title="List item" data-draggable="true">
    <div role="textbox" aria-multiline="true" aria-label="List text" contenteditable="true" class="block-editor-rich-text__editable rich-text" data-wp-block-attribute-key="content" style="white-space: pre-wrap; min-width: 1px;">more additional information</div>
</li>

Environment info

Wordpress | Version 6.7.1
Gutenberg | Version 20.0.0

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[djcowan]

@singhakanshu00 @rinkalpagdar
Thank you for investigating this issue so promptly.

I must apologise for not taking the time to test the issue with Wordpress twentytwentyfive (TT5) theme; which may further complicate the issue.

I noted PR #68731 suggests addingdisplay: inline-block to the rich-text div and wanted to note that approach had been examined with mixed results (depending upon the active theme).

I assume the core/list-item requires the div to be inserted in the editor because:

1. a list-item is a rich-text block that can accept children, and
2. a ist-item is not a block-level element, and therefor leaves a void or non-clickable zone after the text.
3. that there are potentially addional native browser issues