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