Skip to main content
On this page
On this page

CSS

Last updated: Aug 5, 2020 ·
Posted in wiki#notes

System font stack

body {
  /* GitHub */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

  /* An alternative */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

Show animated underline on hover

/* <span class="underline">Underline!</span> */

.underline {
  position: relative;
}

.underline::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -4px;
  background-color: black;
  opacity: 0;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.underline:hover::before {
  opacity: 1;
  left: 0;
  transform: scaleX(1);
}

Add ellipsis to overflowing text

.text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Center a webpage

<body>
  <div id="page-wrap">
    <!-- all websites HTML here -->
  </div>
</body>

#page-wrap {
  width: 800px;
  margin: 0 auto;
}

Make an image responsive

img {
  max-width: 100%;
  height: auto;
}

This adds the text (PDF) after PDF links in the document:

a[href$='.pdf']:after {
  content: '(PDF)';
}

/* Use data-size attribute if provided */
/* Adds `(PDF, <data-size>)` */
a[href$='.pdf'][data-size]:after {
  content: '(PDF, ' attr(data-size) ')';
}

Common breakpoints

sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px

Misc

  • position: sticky doesn't work if overflow of parent is set.