Horizontal rule before or after a heading

horizontal rule example

 

h2:after { content: ' '; width: 40px; height: 1px; display: block; margin: 20px auto 0 auto; background: #E03C31;

Alternate Implementation

heading rule css tiph2 {

display: flex;

width: 100%;

justify-content: left;

align-items: center;

text-align: left;

}

h2:after {

 

content: '';

border-top: 3px solid #1e1e1e;

margin: 0 0 0 20px;

flex: 1 0 20px;

 

}

header rule on left and right side

h2 {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}

h2:before,
h2:after {
    content: '';
    border-top: 2px solid;
    margin: 0 20px 0 0;
    flex: 1 0 20px;
}

h2:after {
    margin: 0 0 0 20px;
}

 

See also: Typography