2018年09月19日(水)

[CSS]シンプルなHTMLで、美しいプログレスバーを実装するスタイルシートのテクニック

• 0
• 98
• 29
• 114

.progress-bar {

  display: flex;

  justify-content: space-between;

  list-style: none;

  padding: 0;

  margin: 0 0 1rem 0;

}

.progress-bar li {

  flex: 2;

  position: relative;

  padding: 0 0 14px 0;

  font-size: var(--font-size-default);

  line-height: 1.5;

  color: var(--color-green);

  font-weight: 600;

  white-space: nowrap;

  overflow: visible;

  min-width: 0;

  text-align: center;

  border-bottom: 2px solid var(--color-gray-disabled);

}

.progress-bar li:first-c...