Faint grey line under horizontal ruler

[rkelleyrtp]

Greetings all,

I am trying to use some custom CSS code to tailor the horizontal ruler using the material theme. However, I keep seeing a faint grey line at the bottom of the ruler. How can I disable/remove that line? I searched the scss files for any reference to horizontal ruler definitions but could not find any. I am still learning CSS so I probably just missed it somewhere.

As an exaggerated example:

hr {
    display: block;
    height: 51px;
    border: 0;
    border-top: 1px solid #ADF;
    margin: 1em 0;
    padding: 0;
}

Thank you.

[squidfunk]

We use border-bottom to style the ruler:

mkdocs-material/src/assets/stylesheets/main/_typeset.scss

Lines 152 to 156 in 2ba3538

	hr {
	display: flow-root;
	margin: 1.5em 0;
	border-bottom: px2rem(1px) solid var(--md-default-fg-color--lightest);
	}

Thus, this should do the trick:

.md-typeset hr {
    display: block;
    height: 51px;
    border: 0;
    border-bottom: 1px solid #ADF;
    margin: 1em 0;
    padding: 0;
}

Note that you should scope your rules in .md-typeset to match specificity of the base definitions.

[rkelleyrtp]

Thank you!