diff --git a/modules/markup/markdown/callout/github.go b/modules/markup/markdown/callout/github.go
index 0a6ab10cac..443f6fe2a3 100644
--- a/modules/markup/markdown/callout/github.go
+++ b/modules/markup/markdown/callout/github.go
@@ -72,6 +72,7 @@ func (g *GitHubCalloutTransformer) Transform(node *ast.Document, reader text.Rea
 
 			// create an emphasis to make it bold
 			attentionParagraph := ast.NewParagraph()
+			attentionParagraph.SetAttributeString("class", []byte("attention-title"))
 			emphasis := ast.NewEmphasis(2)
 			emphasis.SetAttributeString("class", []byte("attention-"+attentionType))
 			firstParagraph.InsertBefore(firstParagraph, firstTextNode, emphasis)
diff --git a/modules/markup/markdown/callout/github_legacy.go b/modules/markup/markdown/callout/github_legacy.go
index 080cbe625c..ce86c10356 100644
--- a/modules/markup/markdown/callout/github_legacy.go
+++ b/modules/markup/markdown/callout/github_legacy.go
@@ -51,8 +51,15 @@ func (g *GitHubLegacyCalloutTransformer) Transform(node *ast.Document, reader te
 			// color the blockquote
 			v.SetAttributeString("class", []byte("attention-header attention-"+calloutType))
 
-			// Prepend callout icon before the callout node itself
-			firstParagraph.InsertBefore(firstParagraph, calloutNode, NewAttention(calloutType))
+			// Create new parargaph.
+			attentionParagraph := ast.NewParagraph()
+			attentionParagraph.SetAttributeString("class", []byte("attention-title"))
+
+			// Move the callout node to the paragraph and insert the paragraph.
+			attentionParagraph.AppendChild(attentionParagraph, NewAttention(calloutType))
+			attentionParagraph.AppendChild(attentionParagraph, calloutNode)
+			firstParagraph.Parent().InsertBefore(firstParagraph.Parent(), firstParagraph, attentionParagraph)
+			firstParagraph.RemoveChild(firstParagraph, calloutNode)
 		}
 
 		return ast.WalkContinue, nil
diff --git a/modules/markup/sanitizer.go b/modules/markup/sanitizer.go
index cdbb1f7d97..c0b449ea5b 100644
--- a/modules/markup/sanitizer.go
+++ b/modules/markup/sanitizer.go
@@ -64,6 +64,7 @@ func createDefaultPolicy() *bluemonday.Policy {
 	policy.AllowAttrs("class").Matching(regexp.MustCompile(`^color-preview$`)).OnElements("span")
 
 	// For attention
+	policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-title$`)).OnElements("p")
 	policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-header attention-\w+$`)).OnElements("blockquote")
 	policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-\w+$`)).OnElements("strong")
 	policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-icon attention-\w+ svg octicon-[\w-]+$`)).OnElements("svg")
diff --git a/web_src/css/base.css b/web_src/css/base.css
index a2cf4ba580..dc34728df7 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1127,6 +1127,11 @@ input:-webkit-autofill:active,
   margin: auto 0.5em auto 0;
 }
 
+.attention-title {
+  align-items: center;
+  display: flex;
+}
+
 blockquote.attention-note {
   border-left-color: var(--color-blue-dark-1);
 }