• 2020-12-01

    Line through headings

    Author

    Jens Törnell

    Comments

    Start a discussion

    Full page

    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