Author: Jens Törnell

Page 1 of 13 - 62 posts

  • 2021-05-01

    List item span all the way

    Author

    Comments

    Start a discussion

    Here we have a list. It's not as straight forward as it seems to make the active list item be selected all the way to the left,

    The trick is to use a pseudo element that spans all the way out.

    Read more
  • 2021-04-01

    Invert icons on hover

    Author

    Comments

    Start a discussion

    Hover the icon below and it will be inverted to white. The trick is to use filter: invert(1);.

    HTML

    <figure>
      <img src="http://csspoo.com/assets/images/remixicons/link.svg">
    </figure>

    CSS

    figure {
      display: inline-block;
      padding: 1rem;
      background: #eee;
    }
    
    figure img {
      filter: invert(1);
      vertical-align: top;
    }
    
    figure:hover {
      background: #000;
    }
    
    figure:hover img {
      filter: invert(0);
    }
    Read more
  • 2021-03-01

    Ordered nested list counters

    Author

    Comments

    Start a discussion

    The list numbers are automatically generated.

    <ol>
      <li>Primary 1
        <ol>
          <li>Sub 1</li>
          <li>Sub 2</li>
        </ol>
      </li>
      <li>Primary 2
        <ol>
          <li>Sub 1</li>
          <li>Sub 2</li>
        </ol>
      </li>
    </ol>
    ol {
      counter-reset: section;
      list-style-type: none;
      padding: 0;
    }
    
    li::before {
      counter-increment: section;
      content: counters(section, ".") " ";
      color: #aaa;
      width: 2rem;
      display: inline-block;
    }
    Read more