• 2020-12-01

    Line through headings

    Author

    Comments

    Start a discussion

    For this to be short and sweet, grid is used.

    HTML

    <h2>A headline</h2>

    CSS

    h2 {
        display: grid;
        width: 100%;
        align-items: center;
        text-align: center;
        grid-template-columns: minmax(1rem, 1fr) auto minmax(1rem, 1fr);
        grid-gap: 1rem;
        color: #333;
    }
    
    h2:before,
    h2:after {
        content: '';
        height: 2px;
    }
    
    h2:before {
      background-image: linear-gradient(to right, #fff 0%, #aaa 100%);
    }
    
    h2:after {
      background-image: linear-gradient(to left, #fff 0%, #aaa 100%);
    }

    Sources