diff --git a/src/librustdoc/html/format.rs b/src/librustdoc/html/format.rs
index c03e679bc5194..2e5432d6bc8a7 100644
--- a/src/librustdoc/html/format.rs
+++ b/src/librustdoc/html/format.rs
@@ -934,10 +934,14 @@ impl<'a> fmt::Display for Function<'a> {
 
 impl<'a> fmt::Display for VisSpace<'a> {
     fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
+        if let Some(clean::Inherited) | None = *self.get(){
+            return Ok(());
+        }
+
+        write!(f, "<div class='token token-vis'>")?;
         match *self.get() {
-            Some(clean::Public) => f.write_str("pub "),
-            Some(clean::Inherited) | None => Ok(()),
-            Some(clean::Visibility::Crate) => write!(f, "pub(crate) "),
+            Some(clean::Public) => f.write_str("pub"),
+            Some(clean::Visibility::Crate) => write!(f, "pub(crate)"),
             Some(clean::Visibility::Restricted(did, ref path)) => {
                 f.write_str("pub(")?;
                 if path.segments.len() != 1
@@ -946,16 +950,22 @@ impl<'a> fmt::Display for VisSpace<'a> {
                     f.write_str("in ")?;
                 }
                 resolved_path(f, did, path, true, false)?;
-                f.write_str(") ")
+                f.write_str(")")
             }
-        }
+            Some(clean::Inherited) | None => unreachable!(),
+        }?;
+        write!(f, "</div>")
     }
 }
 
 impl fmt::Display for UnsafetySpace {
     fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
         match self.get() {
-            hir::Unsafety::Unsafe => write!(f, "unsafe "),
+            hir::Unsafety::Unsafe => {
+                write!(f, "<div class='token token-unsafe'>")?;
+                write!(f, "unsafe")?;
+                write!(f, "</div>")
+            }
             hir::Unsafety::Normal => Ok(())
         }
     }
@@ -964,7 +974,11 @@ impl fmt::Display for UnsafetySpace {
 impl fmt::Display for ConstnessSpace {
     fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
         match self.get() {
-            hir::Constness::Const => write!(f, "const "),
+            hir::Constness::Const => {
+                write!(f, "<div class='token token-const'>")?;
+                write!(f, "const")?;
+                write!(f, "</div>")
+            }
             hir::Constness::NotConst => Ok(())
         }
     }
@@ -973,7 +987,11 @@ impl fmt::Display for ConstnessSpace {
 impl fmt::Display for AsyncSpace {
     fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
         match self.0 {
-            hir::IsAsync::Async => write!(f, "async "),
+            hir::IsAsync::Async => {
+                write!(f, "<div class='token token-async'>")?;
+                write!(f, "async")?;
+                write!(f, "</div>")
+            }
             hir::IsAsync::NotAsync => Ok(()),
         }
     }
@@ -1050,7 +1068,11 @@ impl fmt::Display for AbiSpace {
         let quot = if f.alternate() { "\"" } else { "&quot;" };
         match self.0 {
             Abi::Rust => Ok(()),
-            abi => write!(f, "extern {0}{1}{0} ", quot, abi.name()),
+            abi => {
+                write!(f, "<div class='token token-abi'>")?;
+                write!(f, "extern {0}{1}{0} ", quot, abi.name())?;
+                write!(f, "</div>")
+            }
         }
     }
 }
diff --git a/src/librustdoc/html/render.rs b/src/librustdoc/html/render.rs
index 3a8e8a6a6c840..594cf7d8d66a0 100644
--- a/src/librustdoc/html/render.rs
+++ b/src/librustdoc/html/render.rs
@@ -2962,18 +2962,13 @@ fn item_static(w: &mut fmt::Formatter, cx: &Context, it: &clean::Item,
 
 fn item_function(w: &mut fmt::Formatter, cx: &Context, it: &clean::Item,
                  f: &clean::Function) -> fmt::Result {
-    let name_len = format!("{}{}{}{}{:#}fn {}{:#}",
-                           VisSpace(&it.visibility),
-                           ConstnessSpace(f.header.constness),
-                           UnsafetySpace(f.header.unsafety),
-                           AsyncSpace(f.header.asyncness),
-                           AbiSpace(f.header.abi),
+    let name_len = format!("fn {}{:#}",
                            it.name.as_ref().unwrap(),
                            f.generics).len();
     write!(w, "{}<pre class='rust fn'>", render_spotlight_traits(it)?)?;
     render_attributes(w, it)?;
     write!(w,
-           "{vis}{constness}{unsafety}{asyncness}{abi}fn \
+           "{vis}{constness}{unsafety}{asyncness}{abi}<br>fn \
            {name}{generics}{decl}{where_clause}</pre>",
            vis = VisSpace(&it.visibility),
            constness = ConstnessSpace(f.header.constness),
@@ -3400,14 +3395,7 @@ fn render_assoc_item(w: &mut fmt::Formatter,
                 href(did).map(|p| format!("{}#{}.{}", p.0, ty, name)).unwrap_or(anchor)
             }
         };
-        let mut head_len = format!("{}{}{}{}{:#}fn {}{:#}",
-                                   VisSpace(&meth.visibility),
-                                   ConstnessSpace(header.constness),
-                                   UnsafetySpace(header.unsafety),
-                                   AsyncSpace(header.asyncness),
-                                   AbiSpace(header.abi),
-                                   name,
-                                   *g).len();
+        let mut head_len = format!("{}{:#}", name, *g).len();
         let (indent, end_newline) = if parent == ItemType::Trait {
             head_len += 4;
             (4, false)
@@ -3415,7 +3403,7 @@ fn render_assoc_item(w: &mut fmt::Formatter,
             (0, true)
         };
         render_attributes(w, meth)?;
-        write!(w, "{}{}{}{}{}fn <a href='{href}' class='fnname'>{name}</a>\
+        write!(w, "{}{}{}{}{}<br><a href='{href}' class='fnname'>{name}</a>\
                    {generics}{decl}{where_clause}",
                VisSpace(&meth.visibility),
                ConstnessSpace(header.constness),
diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css
index 4ec8637cc71f6..165131c805583 100644
--- a/src/librustdoc/html/static/rustdoc.css
+++ b/src/librustdoc/html/static/rustdoc.css
@@ -1576,3 +1576,11 @@ div.name.expand::before {
 	left: -15px;
 	top: 2px;
 }
+
+div.token {
+    display: inline-block;
+    border-radius: 3px;
+    font-size: 8pt;
+    margin: 1px;
+    border: 1px solid black;
+}
diff --git a/src/librustdoc/html/static/themes/dark.css b/src/librustdoc/html/static/themes/dark.css
index 333fe76a8a4a9..a011f72e057f1 100644
--- a/src/librustdoc/html/static/themes/dark.css
+++ b/src/librustdoc/html/static/themes/dark.css
@@ -430,3 +430,29 @@ div.files > a:hover, div.name:hover {
 div.files > .selected {
 	background-color: #333;
 }
+
+.token-vis {
+    background: #89b389;
+    color: white;
+    padding: 0px 2px;
+}
+.token-unsafe {
+    background: #870000;
+    color: white;
+    padding: 0px 2px;
+}
+.token-const {
+    background: yellow;
+    color: black;
+    padding: 0px 2px;
+}
+.token-async {
+    background: orange;
+    color: black;
+    padding: 0px 2px;
+}
+.token-abi {
+    background: blue;
+    color: white;
+    padding: 0px 2px;
+}
diff --git a/src/librustdoc/html/static/themes/light.css b/src/librustdoc/html/static/themes/light.css
index 19ae67b29881f..cd4e5d7b4db54 100644
--- a/src/librustdoc/html/static/themes/light.css
+++ b/src/librustdoc/html/static/themes/light.css
@@ -425,3 +425,29 @@ div.files > a:hover, div.name:hover {
 div.files > .selected {
 	background-color: #fff;
 }
+
+.token-vis {
+    background: #89b389;
+    color: white;
+    padding: 0px 2px;
+}
+.token-unsafe {
+    background: #870000;
+    color: white;
+    padding: 0px 2px;
+}
+.token-const {
+    background: yellow;
+    color: black;
+    padding: 0px 2px;
+}
+.token-async {
+    background: orange;
+    color: black;
+    padding: 0px 2px;
+}
+.token-abi {
+    background: blue;
+    color: white;
+    padding: 0px 2px;
+}