下矢印

プレビュー

コードの紹介

html

<span class="cIconArrow cIconArrow--bottom"></span>

CSS

.cIconArrow {
  --rotate: rotate(0deg);
  transform: var(--rotate);

  --font-size: 24px;
  --font-color: #000;
  font-size: var(--font-size);
  color: var(--font-color);

  position: relative;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
}
.cIconArrow::before {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-30%, -50%) rotate(-45deg);
}
.cIconArrow::after {
  content: "";
  display: inline-block;
  width: 1.25em;
  height: 3px;
  background: currentColor;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cIconArrow.cIconArrow--bottom {
  --rotate: rotate(90deg);
}