diff -u b/core/modules/comment/tests/src/Functional/CommentAnonymousTest.php b/core/modules/comment/tests/src/Functional/CommentAnonymousTest.php
--- b/core/modules/comment/tests/src/Functional/CommentAnonymousTest.php
+++ b/core/modules/comment/tests/src/Functional/CommentAnonymousTest.php
@@ -50,7 +50,7 @@
     $this->drupalGet($this->node->toUrl());
     $this->submitForm($edit, 'Preview');
     // Cannot use assertRaw here since both title and body are in the form.
-    $preview = (string) $this->cssSelect('.comment.by-anonymous')[0]->asXML();
+    $preview = (string) $this->cssSelect('.comment.by-anonymous')[0]->getHTML();
     $this->assertStringContainsString($title, $preview, 'Anonymous user can preview comment title.');
     $this->assertStringContainsString($body, $preview, 'Anonymous user can preview comment body.');
 
@@ -64,7 +64,7 @@
     $this->drupalGet($this->node->toUrl());
     $this->submitForm($edit, 'Preview');
     // Cannot use assertRaw here since both title and body are in the form.
-    $preview = (string) $this->cssSelect('.comment.by-anonymous')[0]->asXML();
+    $preview = (string) $this->cssSelect('.comment.by-anonymous')[0]->getHTML();
     $this->assertStringContainsString($title, $preview, 'Anonymous user can preview comment title.');
     $this->assertStringContainsString($body, $preview, 'Anonymous user can preview comment body.');
     user_role_grant_permissions(RoleInterface::ANONYMOUS_ID, ['skip comment approval']);
diff -u b/core/modules/comment/tests/src/Functional/CommentPreviewTest.php b/core/modules/comment/tests/src/Functional/CommentPreviewTest.php
--- b/core/modules/comment/tests/src/Functional/CommentPreviewTest.php
+++ b/core/modules/comment/tests/src/Functional/CommentPreviewTest.php
@@ -80,7 +80,7 @@
     $this->assertSession()->fieldValueEquals('comment_body[0][value]', $edit['comment_body[0][value]']);
 
     // Check that the user picture is displayed.
-    $this->assertSession()->elementExists('xpath', '//article[contains(@class, "comment") and span[.="preview"]]//div[contains(@class, "user-picture")]//img');
+    $this->assertSession()->elementExists('xpath', '//article[contains(@class, "comment")]//div[contains(@class, "field--name-user-picture")]//img');
 
     // Ensure that preview node is displayed after the submit buttons of the form.
     $xpath = $this->assertSession()->buildXPathQuery('//div[@id=:id]/following-sibling::article', [':id' => 'edit-actions']);
diff -u b/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php b/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php
--- b/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php
+++ b/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php
@@ -695,6 +695,7 @@
         'item-list.css' => '1d519afe6007f4b01e00f22b0ba8bf33',
         'link.css' => '22f42d430fe458080a7739c70a2d2ea5',
         'links.css' => '21fe64349f5702cd5b89104a1d3b9cd3',
+        'marker.css' => '87bfc0edbf2d77ae57996aa4e8f3e18a',
         'media-embed-error.css' => 'ab7f4c91f7b312122d30d7e09bb1bcc4',
         'media-library.css' => 'bb405519d30970c721405452dfb7b38e',
         'menu.css' => 'c4608b4ac9aafce1f6e0d21c6e6e6ee8',
@@ -788,8 +789,8 @@
         'menu-local-action.html.twig' => 'ff1dfb632b6235a304146aaeaa49c3ca',
         'toolbar.html.twig' => '151657ffe8fc7c8f0d9571a8b0684294',
         'menu-local-tasks.html.twig' => '1e0112bb83f6073f6fc44a94b43dd74b',
-        'comment.html.twig' => '68718b6de9a0d21f5180a9fbcc40987f',
-        'node.html.twig' => '68ce2322607c5a258bd64cb78f49b0e0',
+        'comment.html.twig' => 'ddab9e96bbbb589344146d43ac733ce9',
+        'node.html.twig' => 'fccce85b546ca4981f79f5ad28ee9273',
         'taxonomy-term.html.twig' => '63e39620cd877c85297914fef61930de',
         'media-embed-error.html.twig' => '83621141a91e525cd4df15c1d93b58b2',
         'book-node-export-html.html.twig' => 'e3f896d5f4f69c28256807fb57382eb5',
@@ -798,7 +799,7 @@
         'search-result.html.twig' => '5676e5f62d82fcb1a2588da2197d1455',
         'aggregator-item.html.twig' => '5d1d474391f1f1cce4731b5b33e04df4',
         'media.html.twig' => 'ba8a5c1035a7d9f958d6bb16ea862a74',
-        'mark.html.twig' => '8a162708ce2ca9c3fc272daf4a92897e',
+        'mark.html.twig' => '10a7db2ac7945ecc7ff1419cd2493d9f',
         'forum-submitted.html.twig' => '9566e863a16db23a76ec3e289e16fa47',
         'username.html.twig' => '92ebba7253772a4389c76c27f7d2b0f0',
         'user.html.twig' => 'b265def674626cf35ac46f1bbad3e28f',
only in patch2:
unchanged:
--- a/core/profiles/demo_umami/themes/umami/css/classy/components/node.css
+++ b/core/profiles/demo_umami/themes/umami/css/classy/components/node.css
@@ -3,6 +3,9 @@
  * Visual styles for nodes.
  */
 
-.node--unpublished {
-  background-color: #fff4f4;
+.node__status {
+  float: right; /* LTR */
+}
+[dir="rtl"] .node__status {
+  float: left;
 }
only in patch2:
unchanged:
--- a/core/profiles/demo_umami/themes/umami/templates/classy/content/comment.html.twig
+++ b/core/profiles/demo_umami/themes/umami/templates/classy/content/comment.html.twig
@@ -71,7 +71,6 @@
   set classes = [
     'comment',
     'js-comment',
-    status != 'published' ? status,
     comment.owner.anonymous ? 'by-anonymous',
     author_id and author_id == commented_entity.getOwnerId() ? 'by-' ~ commented_entity.getEntityTypeId() ~ '-author',
   ]
@@ -85,6 +84,7 @@
   <mark class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></mark>
 
   <footer class="comment__meta">
+    {{ markers }}
     {{ user_picture }}
     <p class="comment__submitted">{{ submitted }}</p>
 
only in patch2:
unchanged:
--- a/core/profiles/demo_umami/themes/umami/templates/classy/content/mark.html.twig
+++ b/core/profiles/demo_umami/themes/umami/templates/classy/content/mark.html.twig
@@ -4,17 +4,9 @@
  * Theme override for a marker for new or updated content.
  *
  * Available variables:
- * - status: Number representing the marker status to display. Use the constants
- *   below for comparison:
- *   - MARK_NEW
- *   - MARK_UPDATED
- *   - MARK_READ
+ * - status: The status message to display.
+ * - type: The type of message.
  */
 #}
-{% if logged_in %}
-  {% if status is constant('MARK_NEW') %}
-    <span class="marker">{{ 'New'|t }}</span>
-  {% elseif status is constant('MARK_UPDATED') %}
-    <span class="marker">{{ 'Updated'|t }}</span>
-  {% endif %}
-{% endif %}
+{{ attach_library('classy/marker') }}
+<span class="marker marker--{{ type }}">{{ status }}</span>
only in patch2:
unchanged:
--- a/core/themes/bartik/css/classy/components/node.css
+++ b/core/themes/bartik/css/classy/components/node.css
@@ -3,6 +3,9 @@
  * Visual styles for nodes.
  */
 
-.node--unpublished {
-  background-color: #fff4f4;
+.node__status {
+  float: right; /* LTR */
+}
+[dir="rtl"] .node__status {
+  float: left;
 }
only in patch2:
unchanged:
--- a/core/themes/bartik/templates/classy/content/mark.html.twig
+++ b/core/themes/bartik/templates/classy/content/mark.html.twig
@@ -4,17 +4,9 @@
  * Theme override for a marker for new or updated content.
  *
  * Available variables:
- * - status: Number representing the marker status to display. Use the constants
- *   below for comparison:
- *   - MARK_NEW
- *   - MARK_UPDATED
- *   - MARK_READ
+ * - status: The status message to display.
+ * - type: The type of message.
  */
 #}
-{% if logged_in %}
-  {% if status is constant('MARK_NEW') %}
-    <span class="marker">{{ 'New'|t }}</span>
-  {% elseif status is constant('MARK_UPDATED') %}
-    <span class="marker">{{ 'Updated'|t }}</span>
-  {% endif %}
-{% endif %}
+{{ attach_library('classy/marker') }}
+<span class="marker marker--{{ type }}">{{ status }}</span>
only in patch2:
unchanged:
--- a/core/themes/claro/templates/classy/content/comment.html.twig
+++ b/core/themes/claro/templates/classy/content/comment.html.twig
@@ -71,7 +71,6 @@
   set classes = [
     'comment',
     'js-comment',
-    status != 'published' ? status,
     comment.owner.anonymous ? 'by-anonymous',
     author_id and author_id == commented_entity.getOwnerId() ? 'by-' ~ commented_entity.getEntityTypeId() ~ '-author',
   ]
@@ -85,6 +84,7 @@
   <mark class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></mark>
 
   <footer class="comment__meta">
+    {{ markers }}
     {{ user_picture }}
     <p class="comment__submitted">{{ submitted }}</p>
 
only in patch2:
unchanged:
--- a/core/themes/claro/templates/classy/content/mark.html.twig
+++ b/core/themes/claro/templates/classy/content/mark.html.twig
@@ -4,17 +4,9 @@
  * Theme override for a marker for new or updated content.
  *
  * Available variables:
- * - status: Number representing the marker status to display. Use the constants
- *   below for comparison:
- *   - MARK_NEW
- *   - MARK_UPDATED
- *   - MARK_READ
+ * - status: The status message to display.
+ * - type: The type of message.
  */
 #}
-{% if logged_in %}
-  {% if status is constant('MARK_NEW') %}
-    <span class="marker">{{ 'New'|t }}</span>
-  {% elseif status is constant('MARK_UPDATED') %}
-    <span class="marker">{{ 'Updated'|t }}</span>
-  {% endif %}
-{% endif %}
+{{ attach_library('classy/marker') }}
+<span class="marker marker--{{ type }}">{{ status }}</span>
only in patch2:
unchanged:
--- a/core/themes/claro/templates/classy/content/node.html.twig
+++ b/core/themes/claro/templates/classy/content/node.html.twig
@@ -41,7 +41,6 @@
  *   - node--promoted: Appears on nodes promoted to the front page.
  *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
  *     teaser listings.
- *   - node--unpublished: Appears on unpublished nodes visible only to site
  *     admins.
  * - title_attributes: Same as attributes, except applied to the main title
  *   tag that appears in the template.
@@ -73,7 +72,6 @@
     'node--type-' ~ node.bundle|clean_class,
     node.isPromoted() ? 'node--promoted',
     node.isSticky() ? 'node--sticky',
-    not node.isPublished() ? 'node--unpublished',
     view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
   ]
 %}
@@ -94,6 +92,7 @@
       <div{{ author_attributes.addClass('node__submitted') }}>
         {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
         {{ metadata }}
+        {{ markers }}
       </div>
     </footer>
   {% endif %}
only in patch2:
unchanged:
--- a/core/themes/seven/css/classy/components/node.css
+++ b/core/themes/seven/css/classy/components/node.css
@@ -3,6 +3,9 @@
  * Visual styles for nodes.
  */
 
-.node--unpublished {
-  background-color: #fff4f4;
+.node__status {
+  float: right; /* LTR */
+}
+[dir="rtl"] .node__status {
+  float: left;
 }
only in patch2:
unchanged:
--- a/core/themes/seven/templates/classy/content/comment.html.twig
+++ b/core/themes/seven/templates/classy/content/comment.html.twig
@@ -71,7 +71,6 @@
   set classes = [
     'comment',
     'js-comment',
-    status != 'published' ? status,
     comment.owner.anonymous ? 'by-anonymous',
     author_id and author_id == commented_entity.getOwnerId() ? 'by-' ~ commented_entity.getEntityTypeId() ~ '-author',
   ]
@@ -85,6 +84,7 @@
   <mark class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></mark>
 
   <footer class="comment__meta">
+    {{ markers }}
     {{ user_picture }}
     <p class="comment__submitted">{{ submitted }}</p>
 
only in patch2:
unchanged:
--- a/core/themes/seven/templates/classy/content/mark.html.twig
+++ b/core/themes/seven/templates/classy/content/mark.html.twig
@@ -4,17 +4,9 @@
  * Theme override for a marker for new or updated content.
  *
  * Available variables:
- * - status: Number representing the marker status to display. Use the constants
- *   below for comparison:
- *   - MARK_NEW
- *   - MARK_UPDATED
- *   - MARK_READ
+ * - status: The status message to display.
+ * - type: The type of message.
  */
 #}
-{% if logged_in %}
-  {% if status is constant('MARK_NEW') %}
-    <span class="marker">{{ 'New'|t }}</span>
-  {% elseif status is constant('MARK_UPDATED') %}
-    <span class="marker">{{ 'Updated'|t }}</span>
-  {% endif %}
-{% endif %}
+{{ attach_library('classy/marker') }}
+<span class="marker marker--{{ type }}">{{ status }}</span>
only in patch2:
unchanged:
--- a/core/themes/seven/templates/classy/content/node.html.twig
+++ b/core/themes/seven/templates/classy/content/node.html.twig
@@ -41,7 +41,6 @@
  *   - node--promoted: Appears on nodes promoted to the front page.
  *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
  *     teaser listings.
- *   - node--unpublished: Appears on unpublished nodes visible only to site
  *     admins.
  * - title_attributes: Same as attributes, except applied to the main title
  *   tag that appears in the template.
@@ -73,7 +72,6 @@
     'node--type-' ~ node.bundle|clean_class,
     node.isPromoted() ? 'node--promoted',
     node.isSticky() ? 'node--sticky',
-    not node.isPublished() ? 'node--unpublished',
     view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
   ]
 %}
@@ -94,6 +92,7 @@
       <div{{ author_attributes.addClass('node__submitted') }}>
         {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
         {{ metadata }}
+        {{ markers }}
       </div>
     </footer>
   {% endif %}
only in patch2:
unchanged:
--- a/core/themes/stable/templates/content/mark.html.twig
+++ b/core/themes/stable/templates/content/mark.html.twig
@@ -4,17 +4,9 @@
  * Theme override for a marker for new or updated content.
  *
  * Available variables:
- * - status: Number representing the marker status to display. Use the constants
- *   below for comparison:
- *   - MARK_NEW
- *   - MARK_UPDATED
- *   - MARK_READ
+ * - status: The status message to display.
+ * - type: The type of message.
  */
 #}
-{% if logged_in %}
-  {% if status is constant('MARK_NEW') %}
-    {{ 'New'|t }}
-  {% elseif status is constant('MARK_UPDATED') %}
-    {{ 'Updated'|t }}
-  {% endif %}
-{% endif %}
+{{ attach_library('classy/marker') }}
+<span class="marker marker--{{ type }}">{{ status }}</span>
only in patch2:
unchanged:
--- a/core/themes/stable9/templates/content/mark.html.twig
+++ b/core/themes/stable9/templates/content/mark.html.twig
@@ -4,17 +4,9 @@
  * Theme override for a marker for new or updated content.
  *
  * Available variables:
- * - status: Number representing the marker status to display. Use the constants
- *   below for comparison:
- *   - MARK_NEW
- *   - MARK_UPDATED
- *   - MARK_READ
+ * - status: The status message to display.
+ * - type: The type of message.
  */
 #}
-{% if logged_in %}
-  {% if status is constant('MARK_NEW') %}
-    {{ 'New'|t }}
-  {% elseif status is constant('MARK_UPDATED') %}
-    {{ 'Updated'|t }}
-  {% endif %}
-{% endif %}
+{{ attach_library('classy/marker') }}
+<span class="marker marker--{{ type }}">{{ status }}</span>
only in patch2:
unchanged:
--- a/core/themes/starterkit_theme/css/components/node.css
+++ b/core/themes/starterkit_theme/css/components/node.css
@@ -3,6 +3,9 @@
  * Visual styles for nodes.
  */
 
-.node--unpublished {
-  background-color: #fff4f4;
+.node__status {
+  float: right; /* LTR */
+}
+[dir="rtl"] .node__status {
+  float: left;
 }
only in patch2:
unchanged:
--- a/core/themes/starterkit_theme/templates/content/mark.html.twig
+++ b/core/themes/starterkit_theme/templates/content/mark.html.twig
@@ -4,17 +4,9 @@
  * Theme override for a marker for new or updated content.
  *
  * Available variables:
- * - status: Number representing the marker status to display. Use the constants
- *   below for comparison:
- *   - MARK_NEW
- *   - MARK_UPDATED
- *   - MARK_READ
+ * - status: The status message to display.
+ * - type: The type of message.
  */
 #}
-{% if logged_in %}
-  {% if status is constant('MARK_NEW') %}
-    <span class="marker">{{ 'New'|t }}</span>
-  {% elseif status is constant('MARK_UPDATED') %}
-    <span class="marker">{{ 'Updated'|t }}</span>
-  {% endif %}
-{% endif %}
+{{ attach_library('classy/marker') }}
+<span class="marker marker--{{ type }}">{{ status }}</span>