CODEWITHSUNDEEP
htmlcss
user7974340
user7974340

Reputation:

how to add a horizontal line after each heading in an HTML with only CSS

Is there a way to add a horizontal line after each heading without using <hr>? I only want to add something inside <style> </style>

Upvotes: 0

Views: 7371

Answers (2)

Syed Shah Riage
Syed Shah Riage

Reputation: 51

You can also apply:

h1::after{
    display: block;
    content: '';
    margin-top: 10px;
    border-bottom: 1px solid #000;
}

Upvotes: 2

gavgrif
gavgrif

Reputation: 15499

The correct way to add a line after a heading IS to use CSS not a <hr/> element. note that H elements are block level elements (unless you are styling them to be inline or are using display: flex on the parent container, so the border-bottom will extend the full width of thecontainer.

This can be applied individually to any h element - or to them all by combining all h elements into a single style declaration.

h1 {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: solid 1px #e1e1e1;
}
<h1>This is a heading</h1>

Upvotes: 1

Related Questions