[{"data":1,"prerenderedAt":822},["ShallowReactive",2],{"blog-post:en:\u002Fen\u002Fblog\u002Fhow-to-add-horizontal-line-markdown":3},{"id":4,"title":5,"author":6,"body":7,"category":791,"date":792,"description":793,"extension":794,"image":795,"imageAlt":796,"meta":797,"navigation":798,"path":799,"seo":800,"stem":801,"tags":802,"translationKey":803,"__hash__":804,"html":805,"bodyMarkdown":806,"translations":807,"previous":814,"next":817},"blog\u002Fen\u002Fblog\u002F3.how-to-add-horizontal-line-markdown.md","How to Add a Horizontal Line in Markdown","Antoine Frankart",{"type":8,"value":9,"toc":774},"minimark",[10,14,17,22,34,64,71,74,94,100,107,138,142,145,166,172,176,181,184,198,205,208,225,229,232,255,261,264,268,271,291,297,301,304,307,339,342,398,402,417,423,426,430,439,442,446,449,526,529,533,542,545,551,555,562,587,593,596,643,647,741,743,746,752,760,763,770],[11,12,13],"p",{},"A horizontal line in Markdown lets you separate sections, break the rhythm between two ideas, or simply give the reader a visual pause. It only takes three characters on a line. That is all. But as is often the case with Markdown, it is not always that simple, especially if you switch between GitHub, Obsidian, or a static site generator.",[11,15,16],{},"Here is what you need to know about horizontal lines in Markdown, from the basic syntax to the edge cases that can waste your time.",[18,19,21],"h2",{"id":20},"the-three-possible-syntaxes","The three possible syntaxes",[11,23,24,25,29,30,33],{},"Markdown supports three ways to create a horizontal line, also called a ",[26,27,28],"em",{},"horizontal rule"," or ",[26,31,32],{},"thematic break",":",[35,36,41],"pre",{"className":37,"code":38,"language":39,"meta":40,"style":40},"language-markdown shiki shiki-themes github-light github-dark","---\n***\n___\n","markdown","",[42,43,44,52,58],"code",{"__ignoreMap":40},[45,46,49],"span",{"class":47,"line":48},"line",1,[45,50,51],{},"---\n",[45,53,55],{"class":47,"line":54},2,[45,56,57],{},"***\n",[45,59,61],{"class":47,"line":60},3,[45,62,63],{},"___\n",[11,65,66,67,70],{},"Three hyphens, three asterisks, or three underscores. In every case, the HTML output is an ",[42,68,69],{},"\u003Chr>"," tag.",[11,72,73],{},"You can also use more than three characters if you prefer a separator that looks more visible in the raw file:",[35,75,77],{"className":37,"code":76,"language":39,"meta":40,"style":40},"---------------\n***************\n_______________\n",[42,78,79,84,89],{"__ignoreMap":40},[45,80,81],{"class":47,"line":48},[45,82,83],{},"---------------\n",[45,85,86],{"class":47,"line":54},[45,87,88],{},"***************\n",[45,90,91],{"class":47,"line":60},[45,92,93],{},"_______________\n",[11,95,96,97,99],{},"The HTML output is still an ",[42,98,69],{}," tag. The extra characters do not add any special effect on their own.",[11,101,102,103,106],{},"A good habit to keep in mind: leave a blank line before and after the horizontal line. It is not an absolute requirement for every Markdown reader or parser, but it is the safest way to avoid problems, especially with ",[42,104,105],{},"---",", which can be interpreted as a level 2 heading in Setext syntax.",[35,108,110],{"className":37,"code":109,"language":39,"meta":40,"style":40},"This is a paragraph.\n\n---\n\nThis is another paragraph.\n",[42,111,112,117,123,127,132],{"__ignoreMap":40},[45,113,114],{"class":47,"line":48},[45,115,116],{},"This is a paragraph.\n",[45,118,119],{"class":47,"line":54},[45,120,122],{"emptyLinePlaceholder":121},true,"\n",[45,124,125],{"class":47,"line":60},[45,126,51],{},[45,128,130],{"class":47,"line":129},4,[45,131,122],{"emptyLinePlaceholder":121},[45,133,135],{"class":47,"line":134},5,[45,136,137],{},"This is another paragraph.\n",[18,139,141],{"id":140},"hyphens-asterisks-or-underscores-which-one-should-you-choose","Hyphens, asterisks, or underscores: which one should you choose?",[11,143,144],{},"Functionally, there is no difference. The choice is mostly a matter of convention.",[146,147,148,154,160],"ul",{},[149,150,151,153],"li",{},[42,152,105],{}," is the most common form. You will see it everywhere in GitHub READMEs, documentation, and articles.",[149,155,156,159],{},[42,157,158],{},"***"," is sometimes used in more editorial content because some people find it more visual in plain text.",[149,161,162,165],{},[42,163,164],{},"___"," works just as well, but it is less common.",[11,167,168,169,171],{},"The most important thing is consistency. It is better to pick one syntax and stick with it across your files. In practice, ",[42,170,105],{}," is the standard.",[18,173,175],{"id":174},"the-most-common-mistakes","The most common mistakes",[177,178,180],"h3",{"id":179},"the-setext-heading-trap","The Setext heading trap",[11,182,183],{},"If you write this:",[35,185,187],{"className":37,"code":186,"language":39,"meta":40,"style":40},"Some text\n---\n",[42,188,189,194],{"__ignoreMap":40},[45,190,191],{"class":47,"line":48},[45,192,193],{},"Some text\n",[45,195,196],{"class":47,"line":54},[45,197,51],{},[11,199,200,201,204],{},"Markdown usually will not render a horizontal line. It will turn ",[42,202,203],{},"Some text"," into a level 2 heading.",[11,206,207],{},"The safest solution is to surround the separator with blank lines:",[35,209,211],{"className":37,"code":210,"language":39,"meta":40,"style":40},"Some text\n\n---\n",[42,212,213,217,221],{"__ignoreMap":40},[45,214,215],{"class":47,"line":48},[45,216,193],{},[45,218,219],{"class":47,"line":54},[45,220,122],{"emptyLinePlaceholder":121},[45,222,223],{"class":47,"line":60},[45,224,51],{},[177,226,228],{"id":227},"confusion-with-yaml-frontmatter","Confusion with YAML frontmatter",[11,230,231],{},"If you use frontmatter in your Markdown files, which is common with Nuxt Content, Astro, Hugo, Jekyll, or other static site generators, your document often starts like this:",[35,233,235],{"className":37,"code":234,"language":39,"meta":40,"style":40},"---\ntitle: My article\ndate: 2026-04-13\n---\n",[42,236,237,241,246,251],{"__ignoreMap":40},[45,238,239],{"class":47,"line":48},[45,240,51],{},[45,242,243],{"class":47,"line":54},[45,244,245],{},"title: My article\n",[45,247,248],{"class":47,"line":60},[45,249,250],{},"date: 2026-04-13\n",[45,252,253],{"class":47,"line":129},[45,254,51],{},[11,256,257,258,260],{},"Here, the ",[42,259,105],{}," lines do not represent a horizontal line. They are used to delimit metadata.",[11,262,263],{},"Confusion usually happens when the frontmatter is not closed properly. In that case, the parser may produce inconsistent output. So it is always worth checking that the block is properly opened and closed.",[177,265,267],{"id":266},"spaces-between-the-characters","Spaces between the characters",[11,269,270],{},"The following syntaxes are valid:",[35,272,274],{"className":37,"code":273,"language":39,"meta":40,"style":40},"- - -\n* * *\n_ _ _\n",[42,275,276,281,286],{"__ignoreMap":40},[45,277,278],{"class":47,"line":48},[45,279,280],{},"- - -\n",[45,282,283],{"class":47,"line":54},[45,284,285],{},"* * *\n",[45,287,288],{"class":47,"line":60},[45,289,290],{},"_ _ _\n",[11,292,293,294,296],{},"They also produce an ",[42,295,69],{}," tag. Some people use them to make the source file easier to read, but it is not necessary.",[18,298,300],{"id":299},"how-it-behaves-on-github","How it behaves on GitHub",[11,302,303],{},"GitHub Flavored Markdown supports all three syntaxes.",[11,305,306],{},"A few useful points:",[146,308,309,320,330],{},[149,310,311,312,316,317,319],{},"in ",[313,314,315],"strong",{},"READMEs"," and wikis, ",[42,318,105],{}," is the most common form",[149,321,311,322,325,326,329],{},[313,323,324],{},"issues"," and ",[313,327,328],{},"pull requests",", horizontal lines also work well to separate context from the actual request",[149,331,311,332,335,336,338],{},[313,333,334],{},"GitHub Pages",", a ",[42,337,105],{}," placed at the very top of the file will be interpreted as frontmatter",[11,340,341],{},"Here is a common example in an issue:",[35,343,345],{"className":37,"code":344,"language":39,"meta":40,"style":40},"## Bug report\n\nSteps to reproduce:\n1. Open the application\n2. Click \"Save\"\n\n---\n\n**Expected:** the file is saved\n**Actual:** error 500\n",[42,346,347,352,356,361,366,371,376,381,386,392],{"__ignoreMap":40},[45,348,349],{"class":47,"line":48},[45,350,351],{},"## Bug report\n",[45,353,354],{"class":47,"line":54},[45,355,122],{"emptyLinePlaceholder":121},[45,357,358],{"class":47,"line":60},[45,359,360],{},"Steps to reproduce:\n",[45,362,363],{"class":47,"line":129},[45,364,365],{},"1. Open the application\n",[45,367,368],{"class":47,"line":134},[45,369,370],{},"2. Click \"Save\"\n",[45,372,374],{"class":47,"line":373},6,[45,375,122],{"emptyLinePlaceholder":121},[45,377,379],{"class":47,"line":378},7,[45,380,51],{},[45,382,384],{"class":47,"line":383},8,[45,385,122],{"emptyLinePlaceholder":121},[45,387,389],{"class":47,"line":388},9,[45,390,391],{},"**Expected:** the file is saved\n",[45,393,395],{"class":47,"line":394},10,[45,396,397],{},"**Actual:** error 500\n",[18,399,401],{"id":400},"how-it-behaves-in-obsidian","How it behaves in Obsidian",[11,403,404,405,407,408,410,411,413,414,416],{},"Obsidian supports ",[42,406,105],{},", ",[42,409,158],{},", and ",[42,412,164],{},". In practice, ",[42,415,105],{}," is the syntax people use most often.",[11,418,419,420,422],{},"One thing to know: Obsidian also uses ",[42,421,105],{}," for YAML frontmatter. If you place a horizontal line right after that block, it is better to keep a blank line so the file remains compatible with other Markdown renderers.",[11,424,425],{},"In reading mode as well as in live preview, Obsidian renders the line as a thin visual separator adapted to the active theme.",[18,427,429],{"id":428},"can-you-change-its-thickness-or-style","Can you change its thickness or style?",[11,431,432,433,435,436,438],{},"Standard Markdown does not let you define the thickness, color, or spacing of a horizontal line. ",[42,434,105],{}," simply produces an ",[42,437,69],{},".",[11,440,441],{},"If you need a custom rendering, you have two options.",[177,443,445],{"id":444},"option-1-external-css","Option 1: external CSS",[11,447,448],{},"For a website or a blog, this is the best solution:",[35,450,454],{"className":451,"code":452,"language":453,"meta":40,"style":40},"language-css shiki shiki-themes github-light github-dark","hr {\n  border: none;\n  border-top: 3px solid #333;\n  margin: 2rem 0;\n}\n","css",[42,455,456,466,481,503,521],{"__ignoreMap":40},[45,457,458,462],{"class":47,"line":48},[45,459,461],{"class":460},"s9eBZ","hr",[45,463,465],{"class":464},"sVt8B"," {\n",[45,467,468,472,475,478],{"class":47,"line":54},[45,469,471],{"class":470},"sj4cs","  border",[45,473,474],{"class":464},": ",[45,476,477],{"class":470},"none",[45,479,480],{"class":464},";\n",[45,482,483,486,488,491,495,498,501],{"class":47,"line":60},[45,484,485],{"class":470},"  border-top",[45,487,474],{"class":464},[45,489,490],{"class":470},"3",[45,492,494],{"class":493},"szBVR","px",[45,496,497],{"class":470}," solid",[45,499,500],{"class":470}," #333",[45,502,480],{"class":464},[45,504,505,508,510,513,516,519],{"class":47,"line":129},[45,506,507],{"class":470},"  margin",[45,509,474],{"class":464},[45,511,512],{"class":470},"2",[45,514,515],{"class":493},"rem",[45,517,518],{"class":470}," 0",[45,520,480],{"class":464},[45,522,523],{"class":47,"line":134},[45,524,525],{"class":464},"}\n",[11,527,528],{},"This gives you control over thickness, color, width, and margins.",[177,530,532],{"id":531},"option-2-inline-css-in-html","Option 2: inline CSS in HTML",[35,534,536],{"className":37,"code":535,"language":39,"meta":40,"style":40},"\u003Chr style=\"border: 2px solid red;\" \u002F>\n",[42,537,538],{"__ignoreMap":40},[45,539,540],{"class":47,"line":48},[45,541,535],{},[11,543,544],{},"This depends on the rendering tool. Some accept inline HTML, others partially or fully filter it out. For example, GitHub accepts some HTML tags, but strips inline styles, so this example will not produce the expected rendering there. It is less reliable, so it is better to avoid it if you want to keep your Markdown clean.",[11,546,547,548,550],{},"The best approach is usually this one: keep ",[42,549,105],{}," in the content, and handle the styling in the CSS layer.",[18,552,554],{"id":553},"can-you-put-a-horizontal-line-inside-a-table","Can you put a horizontal line inside a table?",[11,556,557,558,561],{},"No. In a Markdown table, the ",[42,559,560],{},"|---|---|"," syntax is only used to separate the column headers.",[35,563,565],{"className":37,"code":564,"language":39,"meta":40,"style":40},"| Name  | Role     |\n| ----- | -------- |\n| Alice | Dev      |\n| Bob   | Designer |\n",[42,566,567,572,577,582],{"__ignoreMap":40},[45,568,569],{"class":47,"line":48},[45,570,571],{},"| Name  | Role     |\n",[45,573,574],{"class":47,"line":54},[45,575,576],{},"| ----- | -------- |\n",[45,578,579],{"class":47,"line":60},[45,580,581],{},"| Alice | Dev      |\n",[45,583,584],{"class":47,"line":129},[45,585,586],{},"| Bob   | Designer |\n",[11,588,257,589,592],{},[42,590,591],{},"|-------|-----------|"," line is not an independent horizontal line. It is part of the table structure.",[11,594,595],{},"If you need a real visual separator, the simplest solution is often to split the content into two tables, with a horizontal line between them.",[35,597,599],{"className":37,"code":598,"language":39,"meta":40,"style":40},"| Team A | Role |\n| ------ | ---- |\n| Alice  | Dev  |\n\n---\n\n| Team B | Role     |\n| ------ | -------- |\n| Bob    | Designer |\n",[42,600,601,606,611,616,620,624,628,633,638],{"__ignoreMap":40},[45,602,603],{"class":47,"line":48},[45,604,605],{},"| Team A | Role |\n",[45,607,608],{"class":47,"line":54},[45,609,610],{},"| ------ | ---- |\n",[45,612,613],{"class":47,"line":60},[45,614,615],{},"| Alice  | Dev  |\n",[45,617,618],{"class":47,"line":129},[45,619,122],{"emptyLinePlaceholder":121},[45,621,622],{"class":47,"line":134},[45,623,51],{},[45,625,626],{"class":47,"line":373},[45,627,122],{"emptyLinePlaceholder":121},[45,629,630],{"class":47,"line":378},[45,631,632],{},"| Team B | Role     |\n",[45,634,635],{"class":47,"line":383},[45,636,637],{},"| ------ | -------- |\n",[45,639,640],{"class":47,"line":388},[45,641,642],{},"| Bob    | Designer |\n",[18,644,646],{"id":645},"quick-reference","Quick reference",[648,649,650,666],"table",{},[651,652,653],"thead",{},[654,655,656,660,663],"tr",{},[657,658,659],"th",{},"Syntax",[657,661,662],{},"Valid?",[657,664,665],{},"Note",[667,668,669,682,693,704,716,728],"tbody",{},[654,670,671,676,679],{},[672,673,674],"td",{},[42,675,105],{},[672,677,678],{},"Yes",[672,680,681],{},"The most common form. Watch out for the Setext heading trap.",[654,683,684,688,690],{},[672,685,686],{},[42,687,158],{},[672,689,678],{},[672,691,692],{},"A good alternative if you want to avoid confusion with frontmatter.",[654,694,695,699,701],{},[672,696,697],{},[42,698,164],{},[672,700,678],{},[672,702,703],{},"Less common, but supported everywhere.",[654,705,706,711,713],{},[672,707,708],{},[42,709,710],{},"- - -",[672,712,678],{},[672,714,715],{},"Spaces are allowed.",[654,717,718,723,725],{},[672,719,720],{},[42,721,722],{},"----",[672,724,678],{},[672,726,727],{},"More than three characters also works.",[654,729,730,735,738],{},[672,731,732],{},[42,733,734],{},"--",[672,736,737],{},"No",[672,739,740],{},"Two characters are not enough.",[461,742],{},[11,744,745],{},"Horizontal lines are among the simplest Markdown elements, but they are also the source of a few annoying traps: Setext headings, YAML frontmatter, or limitations inside tables.",[11,747,748,749,751],{},"Once you understand these cases, you can use ",[42,750,105],{}," confidently in most documents.",[11,753,754,755,438],{},"If you are also working with tables, you may want to read our dedicated guide: ",[756,757,759],"a",{"href":758},"\u002Fen\u002Fblog\u002Fmarkdown-table-complete-guide-with-examples","Markdown Table: Complete Guide with Examples",[11,761,762],{},"And if you are looking for a Markdown reader that renders separators, tables, code blocks, and everything else properly across your devices, our Fude app is designed precisely for that.",[11,764,765,766],{},"📌 ",[756,767,769],{"href":768},"\u002Fen#download","Download Fude",[771,772,773],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":40,"searchDepth":54,"depth":54,"links":775},[776,777,778,783,784,785,789,790],{"id":20,"depth":54,"text":21},{"id":140,"depth":54,"text":141},{"id":174,"depth":54,"text":175,"children":779},[780,781,782],{"id":179,"depth":60,"text":180},{"id":227,"depth":60,"text":228},{"id":266,"depth":60,"text":267},{"id":299,"depth":54,"text":300},{"id":400,"depth":54,"text":401},{"id":428,"depth":54,"text":429,"children":786},[787,788],{"id":444,"depth":60,"text":445},{"id":531,"depth":60,"text":532},{"id":553,"depth":54,"text":554},{"id":645,"depth":54,"text":646},"markdown-guides","2026-04-13","Learn how to add a horizontal line in a Markdown file, avoid common pitfalls and customize its design.","md","\u002Fimages\u002Fblog\u002Fblog3","How to add a horizontal line in Markdown",{},false,"\u002Fen\u002Fblog\u002Fhow-to-add-horizontal-line-markdown",{"title":5,"description":793},"en\u002Fblog\u002F3.how-to-add-horizontal-line-markdown",null,"horizontal-line-markdown","HCTEBTiD79yPs5wQPnkJyS5oUXawS_xbT-o9KgJgjSg","\u003Cp>\u003Cspan data-fude-source-start=\"1\" data-fude-source-end=\"340\">A horizontal line in Markdown lets you separate sections, break the rhythm between two ideas, or simply give the reader a visual pause. It only takes three characters on a line. That is all. But as is often the case with Markdown, it is not always that simple, especially if you switch between GitHub, Obsidian, or a static site generator.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"342\" data-fude-source-end=\"473\">Here is what you need to know about horizontal lines in Markdown, from the basic syntax to the edge cases that can waste your time.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"478\" data-fude-source-end=\"505\">The three possible syntaxes\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"507\" data-fude-source-end=\"579\">Markdown supports three ways to create a horizontal line, also called a \u003C\u002Fspan>\u003Cem>\u003Cspan data-fude-source-start=\"580\" data-fude-source-end=\"595\">horizontal rule\u003C\u002Fspan>\u003C\u002Fem>\u003Cspan data-fude-source-start=\"596\" data-fude-source-end=\"600\"> or \u003C\u002Fspan>\u003Cem>\u003Cspan data-fude-source-start=\"601\" data-fude-source-end=\"615\">thematic break\u003C\u002Fspan>\u003C\u002Fem>\u003Cspan data-fude-source-start=\"616\" data-fude-source-end=\"617\">:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"631\" data-fude-code-block-end=\"642\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"631\" data-fude-code-block-end=\"642\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">*\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">**\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">___\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"648\" data-fude-source-end=\"739\">Three hyphens, three asterisks, or three underscores. In every case, the HTML output is an \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"739\" data-fude-source-end=\"745\"><hr>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"745\" data-fude-source-end=\"750\"> tag.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"752\" data-fude-source-end=\"862\">You can also use more than three characters if you prefer a separator that looks more visible in the raw file:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"876\" data-fude-code-block-end=\"923\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"876\" data-fude-code-block-end=\"923\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">---------------\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">*\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">**************\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">_______________\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"929\" data-fude-source-end=\"957\">The HTML output is still an \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"957\" data-fude-source-end=\"963\"><hr>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"963\" data-fude-source-end=\"1033\"> tag. The extra characters do not add any special effect on their own.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"1035\" data-fude-source-end=\"1253\">A good habit to keep in mind: leave a blank line before and after the horizontal line. It is not an absolute requirement for every Markdown reader or parser, but it is the safest way to avoid problems, especially with \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"1253\" data-fude-source-end=\"1258\">---\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1258\" data-fude-source-end=\"1323\">, which can be interpreted as a level 2 heading in Setext syntax.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"1337\" data-fude-code-block-end=\"1390\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"1337\" data-fude-code-block-end=\"1390\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">This is a paragraph.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">This is another paragraph.\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>\u003Cspan data-fude-source-start=\"1399\" data-fude-source-end=\"1463\">Hyphens, asterisks, or underscores: which one should you choose?\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"1465\" data-fude-source-end=\"1547\">Functionally, there is no difference. The choice is mostly a matter of convention.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"1551\" data-fude-source-end=\"1556\">---\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1556\" data-fude-source-end=\"1656\"> is the most common form. You will see it everywhere in GitHub READMEs, documentation, and articles.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"1659\" data-fude-source-end=\"1664\">***\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1664\" data-fude-source-end=\"1763\"> is sometimes used in more editorial content because some people find it more visual in plain text.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u003Cspan data-fude-source-start=\"1766\" data-fude-source-end=\"1771\">___\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1771\" data-fude-source-end=\"1814\"> works just as well, but it is less common.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan data-fude-source-start=\"1816\" data-fude-source-end=\"1939\">The most important thing is consistency. It is better to pick one syntax and stick with it across your files. In practice, \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"1939\" data-fude-source-end=\"1944\">---\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"1944\" data-fude-source-end=\"1961\"> is the standard.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"1966\" data-fude-source-end=\"1990\">The most common mistakes\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Ch3>\u003Cspan data-fude-source-start=\"1996\" data-fude-source-end=\"2019\">The Setext heading trap\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan data-fude-source-start=\"2021\" data-fude-source-end=\"2039\">If you write this:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"2053\" data-fude-code-block-end=\"2066\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"2053\" data-fude-code-block-end=\"2066\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">Some text\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">---\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"2072\" data-fude-source-end=\"2137\">Markdown usually will not render a horizontal line. It will turn \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"2137\" data-fude-source-end=\"2148\">Some text\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"2148\" data-fude-source-end=\"2172\"> into a level 2 heading.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"2174\" data-fude-source-end=\"2240\">The safest solution is to surround the separator with blank lines:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"2254\" data-fude-code-block-end=\"2268\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"2254\" data-fude-code-block-end=\"2268\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">Some text\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">---\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>\u003Cspan data-fude-source-start=\"2278\" data-fude-source-end=\"2309\">Confusion with YAML frontmatter\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan data-fude-source-start=\"2311\" data-fude-source-end=\"2484\">If you use frontmatter in your Markdown files, which is common with Nuxt Content, Astro, Hugo, Jekyll, or other static site generators, your document often starts like this:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"2498\" data-fude-code-block-end=\"2540\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"2498\" data-fude-code-block-end=\"2540\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">title\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">:\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\"> My article\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">date\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">:\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> 2026-04-13\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">---\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"2546\" data-fude-source-end=\"2556\">Here, the \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"2556\" data-fude-source-end=\"2561\">---\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"2561\" data-fude-source-end=\"2638\"> lines do not represent a horizontal line. They are used to delimit metadata.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"2640\" data-fude-source-end=\"2845\">Confusion usually happens when the frontmatter is not closed properly. In that case, the parser may produce inconsistent output. So it is always worth checking that the block is properly opened and closed.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cspan data-fude-source-start=\"2851\" data-fude-source-end=\"2880\">Spaces between the characters\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan data-fude-source-start=\"2882\" data-fude-source-end=\"2915\">The following syntaxes are valid:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"2929\" data-fude-code-block-end=\"2946\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"2929\" data-fude-code-block-end=\"2946\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">- - -\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">* * *\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">_ _ _\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"2952\" data-fude-source-end=\"2973\">They also produce an \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"2973\" data-fude-source-end=\"2979\"><hr>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"2979\" data-fude-source-end=\"3070\"> tag. Some people use them to make the source file easier to read, but it is not necessary.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"3075\" data-fude-source-end=\"3099\">How it behaves on GitHub\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"3101\" data-fude-source-end=\"3154\">GitHub Flavored Markdown supports all three syntaxes.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"3156\" data-fude-source-end=\"3176\">A few useful points:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cspan data-fude-source-start=\"3180\" data-fude-source-end=\"3183\">in \u003C\u002Fspan>\u003Cstrong>\u003Cspan data-fude-source-start=\"3185\" data-fude-source-end=\"3192\">READMEs\u003C\u002Fspan>\u003C\u002Fstrong>\u003Cspan data-fude-source-start=\"3194\" data-fude-source-end=\"3206\"> and wikis, \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"3206\" data-fude-source-end=\"3211\">---\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"3211\" data-fude-source-end=\"3235\"> is the most common form\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"3238\" data-fude-source-end=\"3241\">in \u003C\u002Fspan>\u003Cstrong>\u003Cspan data-fude-source-start=\"3243\" data-fude-source-end=\"3249\">issues\u003C\u002Fspan>\u003C\u002Fstrong>\u003Cspan data-fude-source-start=\"3251\" data-fude-source-end=\"3256\"> and \u003C\u002Fspan>\u003Cstrong>\u003Cspan data-fude-source-start=\"3258\" data-fude-source-end=\"3271\">pull requests\u003C\u002Fspan>\u003C\u002Fstrong>\u003Cspan data-fude-source-start=\"3273\" data-fude-source-end=\"3350\">, horizontal lines also work well to separate context from the actual request\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>\u003Cspan data-fude-source-start=\"3353\" data-fude-source-end=\"3356\">in \u003C\u002Fspan>\u003Cstrong>\u003Cspan data-fude-source-start=\"3358\" data-fude-source-end=\"3370\">GitHub Pages\u003C\u002Fspan>\u003C\u002Fstrong>\u003Cspan data-fude-source-start=\"3372\" data-fude-source-end=\"3376\">, a \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"3376\" data-fude-source-end=\"3381\">---\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"3381\" data-fude-source-end=\"3451\"> placed at the very top of the file will be interpreted as frontmatter\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan data-fude-source-start=\"3453\" data-fude-source-end=\"3490\">Here is a common example in an issue:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"3504\" data-fude-code-block-end=\"3638\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"3504\" data-fude-code-block-end=\"3638\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">## Bug report\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">Steps to reproduce:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">1. Open the application\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">2. Click \"Save\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">**Expected:** the file is saved\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">**Actual:** error 500\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>\u003Cspan data-fude-source-start=\"3647\" data-fude-source-end=\"3673\">How it behaves in Obsidian\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"3675\" data-fude-source-end=\"3693\">Obsidian supports \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"3693\" data-fude-source-end=\"3698\">---\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"3698\" data-fude-source-end=\"3700\">, \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"3700\" data-fude-source-end=\"3705\">***\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"3705\" data-fude-source-end=\"3711\">, and \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"3711\" data-fude-source-end=\"3716\">___\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"3716\" data-fude-source-end=\"3731\">. In practice, \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"3731\" data-fude-source-end=\"3736\">---\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"3736\" data-fude-source-end=\"3773\"> is the syntax people use most often.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"3775\" data-fude-source-end=\"3813\">One thing to know: Obsidian also uses \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"3813\" data-fude-source-end=\"3818\">---\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"3818\" data-fude-source-end=\"3991\"> for YAML frontmatter. If you place a horizontal line right after that block, it is better to keep a blank line so the file remains compatible with other Markdown renderers.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"3993\" data-fude-source-end=\"4118\">In reading mode as well as in live preview, Obsidian renders the line as a thin visual separator adapted to the active theme.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"4123\" data-fude-source-end=\"4161\">Can you change its thickness or style?\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"4163\" data-fude-source-end=\"4260\">Standard Markdown does not let you define the thickness, color, or spacing of a horizontal line. \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"4260\" data-fude-source-end=\"4265\">---\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"4265\" data-fude-source-end=\"4285\"> simply produces an \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"4285\" data-fude-source-end=\"4291\"><hr>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"4291\" data-fude-source-end=\"4292\">.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"4294\" data-fude-source-end=\"4347\">If you need a custom rendering, you have two options.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cspan data-fude-source-start=\"4353\" data-fude-source-end=\"4375\">Option 1: external CSS\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan data-fude-source-start=\"4377\" data-fude-source-end=\"4428\">For a website or a blog, this is the best solution:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"css\" data-fude-code-block-start=\"4437\" data-fude-code-block-end=\"4507\">\u003Ccode class=\"language-css\" data-language=\"css\" data-fude-code-block-start=\"4437\" data-fude-code-block-end=\"4507\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">hr\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-constant, color-mix(in srgb, var(--color-code-text) 94%, var(--color-accent-primary) 6%))\">  border\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">:\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-constant, color-mix(in srgb, var(--color-code-text) 94%, var(--color-accent-primary) 6%))\"> none\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-constant, color-mix(in srgb, var(--color-code-text) 94%, var(--color-accent-primary) 6%))\">  border-top\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">:\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-constant, color-mix(in srgb, var(--color-code-text) 94%, var(--color-accent-primary) 6%))\"> 3\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">px\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-constant, color-mix(in srgb, var(--color-code-text) 94%, var(--color-accent-primary) 6%))\"> solid #333\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-token-constant, color-mix(in srgb, var(--color-code-text) 94%, var(--color-accent-primary) 6%))\">  margin\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">:\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-constant, color-mix(in srgb, var(--color-code-text) 94%, var(--color-accent-primary) 6%))\"> 2\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">rem\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-constant, color-mix(in srgb, var(--color-code-text) 94%, var(--color-accent-primary) 6%))\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"4513\" data-fude-source-end=\"4578\">This gives you control over thickness, color, width, and margins.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cspan data-fude-source-start=\"4584\" data-fude-source-end=\"4612\">Option 2: inline CSS in HTML\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"4626\" data-fude-code-block-end=\"4663\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"4626\" data-fude-code-block-end=\"4663\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"><\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">hr\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-function, color-mix(in srgb, var(--color-accent-secondary) 62%, var(--color-code-text) 38%))\"> style\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-keyword, color-mix(in srgb, var(--color-accent-primary) 68%, var(--color-code-text) 32%))\">=\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-string-expression)\">\"border: 2px solid red;\"\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"4669\" data-fude-source-end=\"4993\">This depends on the rendering tool. Some accept inline HTML, others partially or fully filter it out. For example, GitHub accepts some HTML tags, but strips inline styles, so this example will not produce the expected rendering there. It is less reliable, so it is better to avoid it if you want to keep your Markdown clean.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"4995\" data-fude-source-end=\"5039\">The best approach is usually this one: keep \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"5039\" data-fude-source-end=\"5044\">---\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"5044\" data-fude-source-end=\"5101\"> in the content, and handle the styling in the CSS layer.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch2>\u003Cspan data-fude-source-start=\"5106\" data-fude-source-end=\"5151\">Can you put a horizontal line inside a table?\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>\u003Cspan data-fude-source-start=\"5153\" data-fude-source-end=\"5182\">No. In a Markdown table, the \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"5182\" data-fude-source-end=\"5193\">|---|---|\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"5193\" data-fude-source-end=\"5245\"> syntax is only used to separate the column headers.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"5259\" data-fude-code-block-end=\"5342\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"5259\" data-fude-code-block-end=\"5342\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Name  | Role     |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">-----\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">--------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Alice | Dev      |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Bob   | Designer |\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cspan data-fude-source-start=\"5348\" data-fude-source-end=\"5358\">Here, the \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"5358\" data-fude-source-end=\"5381\">|-------|-----------|\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"5381\" data-fude-source-end=\"5460\"> line is not an independent horizontal line. It is part of the table structure.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"5462\" data-fude-source-end=\"5604\">If you need a real visual separator, the simplest solution is often to split the content into two tables, with a horizontal line between them.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre style=\"background-color:var(--fude-code-background, var(--color-code-bg));color:var(--fude-code-foreground, var(--color-code-text))\" tabindex=\"0\" class=\"shiki fude-code-theme fude-code-block\" data-language=\"markdown\" data-fude-code-block-start=\"5618\" data-fude-code-block-end=\"5743\">\u003Ccode class=\"language-markdown\" data-language=\"markdown\" data-fude-code-block-start=\"5618\" data-fude-code-block-end=\"5743\">\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Team A | Role |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">----\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Alice  | Dev  |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Team B | Role     |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> | \u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-token-punctuation, color-mix(in srgb, var(--color-code-text) 78%, var(--color-code-bg) 22%))\">--------\u003C\u002Fspan>\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\"> |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--fude-code-foreground, var(--color-code-text))\">| Bob    | Designer |\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>\u003Cspan data-fude-source-start=\"5752\" data-fude-source-end=\"5767\">Quick reference\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>\u003Cspan data-fude-source-start=\"5771\" data-fude-source-end=\"5777\">Syntax\u003C\u002Fspan>\u003C\u002Fth>\n\u003Cth>\u003Cspan data-fude-source-start=\"5780\" data-fude-source-end=\"5786\">Valid?\u003C\u002Fspan>\u003C\u002Fth>\n\u003Cth>\u003Cspan data-fude-source-start=\"5789\" data-fude-source-end=\"5793\">Note\u003C\u002Fspan>\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Ccode>\u003Cspan data-fude-source-start=\"5825\" data-fude-source-end=\"5830\">---\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"5834\" data-fude-source-end=\"5837\">Yes\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"5843\" data-fude-source-end=\"5903\">The most common form. Watch out for the Setext heading trap.\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>\u003Cspan data-fude-source-start=\"5908\" data-fude-source-end=\"5913\">***\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"5917\" data-fude-source-end=\"5920\">Yes\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"5926\" data-fude-source-end=\"5993\">A good alternative if you want to avoid confusion with frontmatter.\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>\u003Cspan data-fude-source-start=\"5998\" data-fude-source-end=\"6003\">___\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"6007\" data-fude-source-end=\"6010\">Yes\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"6016\" data-fude-source-end=\"6054\">Less common, but supported everywhere.\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>\u003Cspan data-fude-source-start=\"6059\" data-fude-source-end=\"6066\">- - -\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"6069\" data-fude-source-end=\"6072\">Yes\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"6077\" data-fude-source-end=\"6096\">Spaces are allowed.\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>\u003Cspan data-fude-source-start=\"6101\" data-fude-source-end=\"6107\">----\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"6110\" data-fude-source-end=\"6113\">Yes\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"6119\" data-fude-source-end=\"6157\">More than three characters also works.\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>\u003Cspan data-fude-source-start=\"6162\" data-fude-source-end=\"6166\">--\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"6171\" data-fude-source-end=\"6173\">No\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan data-fude-source-start=\"6180\" data-fude-source-end=\"6210\">Two characters are not enough.\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Chr>\n\u003Cp>\u003Cspan data-fude-source-start=\"6219\" data-fude-source-end=\"6396\">Horizontal lines are among the simplest Markdown elements, but they are also the source of a few annoying traps: Setext headings, YAML frontmatter, or limitations inside tables.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"6398\" data-fude-source-end=\"6443\">Once you understand these cases, you can use \u003C\u002Fspan>\u003Ccode>\u003Cspan data-fude-source-start=\"6443\" data-fude-source-end=\"6448\">---\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan data-fude-source-start=\"6448\" data-fude-source-end=\"6479\"> confidently in most documents.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"6481\" data-fude-source-end=\"6560\">If you are also working with tables, you may want to read our dedicated guide: \u003C\u002Fspan>\u003Ca href=\"\u002Fen\u002Fblog\u002Fmarkdown-table-complete-guide-with-examples\" data-fude-link-kind=\"unsupported\">\u003Cspan data-fude-source-start=\"6561\" data-fude-source-end=\"6605\">Markdown Table: Complete Guide with Examples\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan data-fude-source-start=\"6660\" data-fude-source-end=\"6661\">.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"6663\" data-fude-source-end=\"6848\">And if you are looking for a Markdown reader that renders separators, tables, code blocks, and everything else properly across your devices, our Fude app is designed precisely for that.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan data-fude-source-start=\"6850\" data-fude-source-end=\"6852\">📌 \u003C\u002Fspan>\u003Ca href=\"\u002Fen#download\" data-fude-link-kind=\"unsupported\">\u003Cspan data-fude-source-start=\"6853\" data-fude-source-end=\"6866\">Download Fude\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fp>","\nA horizontal line in Markdown lets you separate sections, break the rhythm between two ideas, or simply give the reader a visual pause. It only takes three characters on a line. That is all. But as is often the case with Markdown, it is not always that simple, especially if you switch between GitHub, Obsidian, or a static site generator.\n\nHere is what you need to know about horizontal lines in Markdown, from the basic syntax to the edge cases that can waste your time.\n\n## The three possible syntaxes\n\nMarkdown supports three ways to create a horizontal line, also called a _horizontal rule_ or _thematic break_:\n\n```markdown\n---\n***\n___\n```\n\nThree hyphens, three asterisks, or three underscores. In every case, the HTML output is an `\u003Chr>` tag.\n\nYou can also use more than three characters if you prefer a separator that looks more visible in the raw file:\n\n```markdown\n---------------\n***************\n_______________\n```\n\nThe HTML output is still an `\u003Chr>` tag. The extra characters do not add any special effect on their own.\n\nA good habit to keep in mind: leave a blank line before and after the horizontal line. It is not an absolute requirement for every Markdown reader or parser, but it is the safest way to avoid problems, especially with `---`, which can be interpreted as a level 2 heading in Setext syntax.\n\n```markdown\nThis is a paragraph.\n\n---\n\nThis is another paragraph.\n```\n\n## Hyphens, asterisks, or underscores: which one should you choose?\n\nFunctionally, there is no difference. The choice is mostly a matter of convention.\n\n- `---` is the most common form. You will see it everywhere in GitHub READMEs, documentation, and articles.\n- `***` is sometimes used in more editorial content because some people find it more visual in plain text.\n- `___` works just as well, but it is less common.\n\nThe most important thing is consistency. It is better to pick one syntax and stick with it across your files. In practice, `---` is the standard.\n\n## The most common mistakes\n\n### The Setext heading trap\n\nIf you write this:\n\n```markdown\nSome text\n---\n```\n\nMarkdown usually will not render a horizontal line. It will turn `Some text` into a level 2 heading.\n\nThe safest solution is to surround the separator with blank lines:\n\n```markdown\nSome text\n\n---\n```\n\n### Confusion with YAML frontmatter\n\nIf you use frontmatter in your Markdown files, which is common with Nuxt Content, Astro, Hugo, Jekyll, or other static site generators, your document often starts like this:\n\n```markdown\n---\ntitle: My article\ndate: 2026-04-13\n---\n```\n\nHere, the `---` lines do not represent a horizontal line. They are used to delimit metadata.\n\nConfusion usually happens when the frontmatter is not closed properly. In that case, the parser may produce inconsistent output. So it is always worth checking that the block is properly opened and closed.\n\n### Spaces between the characters\n\nThe following syntaxes are valid:\n\n```markdown\n- - -\n* * *\n_ _ _\n```\n\nThey also produce an `\u003Chr>` tag. Some people use them to make the source file easier to read, but it is not necessary.\n\n## How it behaves on GitHub\n\nGitHub Flavored Markdown supports all three syntaxes.\n\nA few useful points:\n\n- in **READMEs** and wikis, `---` is the most common form\n- in **issues** and **pull requests**, horizontal lines also work well to separate context from the actual request\n- in **GitHub Pages**, a `---` placed at the very top of the file will be interpreted as frontmatter\n\nHere is a common example in an issue:\n\n```markdown\n## Bug report\n\nSteps to reproduce:\n1. Open the application\n2. Click \"Save\"\n\n---\n\n**Expected:** the file is saved\n**Actual:** error 500\n```\n\n## How it behaves in Obsidian\n\nObsidian supports `---`, `***`, and `___`. In practice, `---` is the syntax people use most often.\n\nOne thing to know: Obsidian also uses `---` for YAML frontmatter. If you place a horizontal line right after that block, it is better to keep a blank line so the file remains compatible with other Markdown renderers.\n\nIn reading mode as well as in live preview, Obsidian renders the line as a thin visual separator adapted to the active theme.\n\n## Can you change its thickness or style?\n\nStandard Markdown does not let you define the thickness, color, or spacing of a horizontal line. `---` simply produces an `\u003Chr>`.\n\nIf you need a custom rendering, you have two options.\n\n### Option 1: external CSS\n\nFor a website or a blog, this is the best solution:\n\n```css\nhr {\n  border: none;\n  border-top: 3px solid #333;\n  margin: 2rem 0;\n}\n```\n\nThis gives you control over thickness, color, width, and margins.\n\n### Option 2: inline CSS in HTML\n\n```markdown\n\u003Chr style=\"border: 2px solid red;\" \u002F>\n```\n\nThis depends on the rendering tool. Some accept inline HTML, others partially or fully filter it out. For example, GitHub accepts some HTML tags, but strips inline styles, so this example will not produce the expected rendering there. It is less reliable, so it is better to avoid it if you want to keep your Markdown clean.\n\nThe best approach is usually this one: keep `---` in the content, and handle the styling in the CSS layer.\n\n## Can you put a horizontal line inside a table?\n\nNo. In a Markdown table, the `|---|---|` syntax is only used to separate the column headers.\n\n```markdown\n| Name  | Role     |\n| ----- | -------- |\n| Alice | Dev      |\n| Bob   | Designer |\n```\n\nHere, the `|-------|-----------|` line is not an independent horizontal line. It is part of the table structure.\n\nIf you need a real visual separator, the simplest solution is often to split the content into two tables, with a horizontal line between them.\n\n```markdown\n| Team A | Role |\n| ------ | ---- |\n| Alice  | Dev  |\n\n---\n\n| Team B | Role     |\n| ------ | -------- |\n| Bob    | Designer |\n```\n\n## Quick reference\n\n| Syntax | Valid? | Note |\n| ------ | ------ | ---- |\n| `---`  | Yes    | The most common form. Watch out for the Setext heading trap. |\n| `***`  | Yes    | A good alternative if you want to avoid confusion with frontmatter. |\n| `___`  | Yes    | Less common, but supported everywhere. |\n| `- - -` | Yes   | Spaces are allowed. |\n| `----` | Yes    | More than three characters also works. |\n| `--`   | No     | Two characters are not enough. |\n\n---\n\nHorizontal lines are among the simplest Markdown elements, but they are also the source of a few annoying traps: Setext headings, YAML frontmatter, or limitations inside tables.\n\nOnce you understand these cases, you can use `---` confidently in most documents.\n\nIf you are also working with tables, you may want to read our dedicated guide: [Markdown Table: Complete Guide with Examples](\u002Fen\u002Fblog\u002Fmarkdown-table-complete-guide-with-examples).\n\nAnd if you are looking for a Markdown reader that renders separators, tables, code blocks, and everything else properly across your devices, our Fude app is designed precisely for that.\n\n📌 [Download Fude](\u002Fen#download)\n",[808,811],{"locale":809,"slug":810},"en","how-to-add-horizontal-line-markdown",{"locale":812,"slug":813},"fr","comment-ajouter-une-ligne-horizontale-markdown",{"title":759,"path":758,"stem":815,"description":816,"children":-1},"en\u002Fblog\u002F2.markdown-table-complete-guide-with-examples","Learn how to create, align, and format Markdown tables. Covers syntax, multiline cells, merge workarounds, and tool-specific behavior in GitHub, Obsidian, and more.",{"title":818,"path":819,"stem":820,"description":821,"children":-1},"Markdown and AI: why all LLMs adopted this format","\u002Fen\u002Fblog\u002Fwhy-ai-responds-in-markdown","en\u002Fblog\u002F4.why-ai-responds-in-markdown","LLMs output Markdown with every response. It's not a coincidence: token efficiency, semantic structure, training corpus. Here is why all LLMs adopted Markdown as their native format, and what it changes for you.",1776593810063]