diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 70cce1e..4bba89c 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -1648,9 +1648,9 @@ function theme_status_messages($variables) {
       $output .= '<h2 class="element-invisible">' . $status_heading[$type] . "</h2>\n";
     }
     if (count($messages) > 1) {
-      $output .= " <ul>\n";
+      $output .= " <ul class=\"messages__list\">\n";
       foreach ($messages as $message) {
-        $output .= '  <li>' . $message . "</li>\n";
+        $output .= '  <li class="messages__item">' . $message . "</li>\n";
       }
       $output .= " </ul>\n";
     }
diff --git a/core/modules/system/system.theme-rtl.css b/core/modules/system/system.theme-rtl.css
index eb50ab3..caff55e 100644
--- a/core/modules/system/system.theme-rtl.css
+++ b/core/modules/system/system.theme-rtl.css
@@ -97,13 +97,16 @@ ul.menu {
  */
 .messages {
   border-width: 1px 8px 1px 1px;
-  background-position-x: 99%;
   padding-left: 20px;
   padding-right: 35px;
   text-align: right;
 }
+/* Position the messages icon */
+.messages:before {
+  left: auto;
+  right: 10px;
+}
 .messages--status {
-  background-position: 99.3% 19px;
   border-color: #c9e1bd #77b259 #c9e1bd #c9e1bd;
 }
 .messages--warning {
diff --git a/core/modules/system/system.theme.css b/core/modules/system/system.theme.css
index a3c770a..706691d 100644
--- a/core/modules/system/system.theme.css
+++ b/core/modules/system/system.theme.css
@@ -427,33 +427,48 @@ ul.tabs {

 /**
  * Styles for system messages.
+ *
+ * 1. Allow positioning of the messages icon.
+ * 2. Allow long uninterrupted strings (e.g. paths) to break across lines.
  */
 .messages {
-  background: no-repeat 10px 18px;  /* LTR */
-  border: 1px solid;
-  border-width: 1px 1px 1px 8px;  /* LTR */
+  position: relative; /* 1 */
+  border-width: 1px 1px 1px 8px; /* LTR */
+  border-style: solid;
   border-radius: 2px;
   padding: 15px 20px 15px 35px; /* LTR */
-  word-wrap: break-word;
-  overflow-wrap: break-word;
+  word-wrap: break-word; /* 1 */
+  overflow-wrap: break-word; /* 1 */
+}
+/* Render the messages icon as generated content. */
+.messages:before {
+  content: '';
+  display: block;
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  left: 10px;  /* LTR */
+  top: 18px;
+  background: no-repeat 0 0;
 }
 .messages + .messages {
   margin-top: 1.538em;
 }
-.messages ul {
+.messages__list {
   list-style: none;
   padding: 0;
   margin: 0;
 }
-.messages li + li {
-  margin-top: .769em;
+.messages__item + .messages__item {
+  margin-top: 0.769em;
 }

-/* @TODO Separate tables and messages styling */
+/* @TODO Refactor/separate table and message colors. */
 .messages--status {
   border-color: #c9e1bd #c9e1bd #c9e1bd #77b259;  /* LTR */
+}
+.messages--status:before {
   background-image: url(../../misc/message-16-ok.png);
-  background-position: 12px 19px;  /* LTR */
 }
 .messages--status,
 .ok {
@@ -465,9 +480,11 @@ table tr.ok {
 }

 .messages--warning {
-  background-image: url(../../misc/message-16-warning.png);
   border-color: #f4daa6 #f4daa6 #f4daa6 #e09600;  /* LTR */
 }
+.messages--warning:before {
+  background-image: url(../../misc/message-16-warning.png);
+}
 .messages--warning,
 .warning {
   color: #734c00;
@@ -478,10 +495,13 @@ table tr.warning {
 }

 .messages--error {
-  background-image: url(../../misc/message-16-error.png);
   border-color: #f9c9bf #f9c9bf #f9c9bf #e62600;  /* LTR */
 }
+.messages--error:before {
+  background-image: url(../../misc/message-16-error.png);
+}
 .messages--error,
+.messages--error p.error,
 .error {
   color: #a51b00;
 }
@@ -489,6 +509,3 @@ table tr.warning {
 table tr.error {
   background-color: #fcf4f2;
 }
-.messages--error p.error {
-  color: #a51b00;
-}