How to remove unwanted horizontals line in markdown

Question

I'm unable to remove the unwanted lines in the markdown, In my GitHub profile README I have not used any horizontal line, but it's showing on its own, and I'm unable to remove it from the markdown.

Here's the image

GitHub profile README

Here's the code

<h1 align="center">Hi,👋🏻 I'm Anuj</h1>
<!-- Social Media ICons -->

## **🔗Connect with me ➜**

<div align="center">
  <a href= "https://twitter.com/anujcodes_25">
  <img align="center" src="https://img.icons8.com/stickers/100/000000/twitter.png" alt="twitter icon" height="40" width="40" /></a>&ensp;
</div>

As you can see, I have not added any horizontal line here.

I have tried various things which are

• I have tried to put the paragraph tag(<p>) inside the heading tag

• I also tried to give a line space, but it didn't work

• Instead of using the heading tag (from HTML) I have tried to use ## which is native to Markdown but still won't work

I have researched and tried my best to remove the horizontal line, but unable to do so.

Answer 1

I finally found a solution for this issue with headers!

To remove the unwanted horizontal lines that automatically appear beneath <h1> tags in GitHub markdown, you can utilize GitHub's specific styling rules for content. GitHub automatically applies styles to content that includes certain IDs like "toc" by prefixing them with "user-content-". This behavior can be used to your advantage to override default styles, particularly the horizontal line under headers.

So here is the revised solution to your problem:

<div id="user-content-toc">
  <ul align="center" style="list-style: none;">
    <summary>
      <h1>Hi,👋🏻 I'm Anuj</h1>
    </summary>
  </ul>
</div>
<!-- Social Media Icons -->

<div id="toc"> <!-- both work, toc or user-content-toc -->
  <ul style="list-style: none;">
    <summary>
      <h2><b>🔗Connect with me ➜</b></h2>
    </summary>
  </ul>
</div>

<div align="center">
  <a href="https://twitter.com/anujcodes_25">
    <img src="https://img.icons8.com/stickers/100/000000/twitter.png" alt="twitter icon" height="40" width="40" />
  </a>
</div>

Feel free to check out a gist example here: https://gist.github.com/CodeByAidan/bb43bdb1c07c0933d8b67c23515fb912

Explanation:

1. Using the summary Tag: Placing the <h1> inside a <summary> tag inside a <ul> with the ID set to "user-content-toc" utilizes GitHub's default styles, which don't include underlining headers when they are in this context. This is a unique workaround that leverages how GitHub styles summary elements differently from standalone <h1> tags.

2. ID "user-content-toc": By using "user-content-toc" or just "toc" for the ID, you trigger GitHub's specific styling for user-generated table of contents, which includes removing list styles and adjusting padding. This ID is crucial because GitHub applies certain styles to elements with this ID that are conducive to formatting content without additional undesired effects like horizontal lines.

3. Align and Style: The align="center" attribute and style="list-style: none;" help in ensuring the text is centered and no bullet points are displayed, respectively.

Keep in mind this method is somewhat unconventional and relies almost entirely strictly on GitHub's internal CSS handling.

Where and how did you find any of this user-content-toc!?

4 hours of going back and forth with trial and error to just get the setup down, then finding what can I use and what can I do about removing the bullet point from:

<div id="abc">
  <ul align="center" style="list-style: none;">
    <summary>
      <h1>Hi,👋🏻 I'm Anuj</h1>
    </summary>
  </ul>
</div>

First, I looked up what the div name was, say with an ID "abc", search for a div that has that very same ID by right clicking on the <div>, then look at the CSS properties. Nothing really stood out initially, I did see that it was all wrapped in some sort of Markdown entry, and I saw "layout.scss", so I looked over there.

Next, I looked at this "layout.scss" file, that looked empty, there HAD to be more. So, we then look at the outputted CSS file.

So, then I looked over for "user-content" in this CSS source file. I saw 12 results; I then began looking for anything that had to deal with a "list". I saw "list-items: none" and knew that had to be it! I solved the puzzle! Now if we use our common knowledge from before about the values of ID's in divs being appended to "user-content-", what if we try overriding the "TOC" result? TOC stands for Table of Contents, and after trying it, it worked!