GeneratePress Heading and Number Style CSS

By default the headings are comes with some basic styles. So, here I am sharing with you a bunch of CSS code that will allows you to make your heading looks better and numbers are decorated with gradient colors..

Just copy the CSS code and paste to your theme customization CSS area.

Heading 1

Heading 2

Heading 3

Copy the code below and paste to the Additional CSS Area under Theme Customization.

/* OL Start */
.entry-content h1 ,h2 ,h3{
    border-bottom: 2px solid #e8edf0;
    padding-top: 1rem;
    padding-bottom: 0.825rem;
}
.number{
	list-style: decimal;
line-height: 36px;
    display: inline-block;
    min-width: 36px;
    margin: 0 6px 0 0;
    padding: 0 5px;
    text-align: center;
    vertical-align: 5px;
    color: #fff;
    border-radius: 3px;
    background: #4166c7;
    background: linear-gradient(to left, #6320c9, #4166c7);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    font-size: 20px;
    font-size: 1.25rem;
}
/* OL End */

1 Heading with Numbers

2 Heading with Numbers

/* Just add (span class="number") on the Number like below */
 
<h2><span class="number">1</span> Heading with Numbers</h2>

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.