疑似要素で棒線を上手に操る方法

疑似要素で棒線を上手に操る方法をまとめた

文字の間に縦線

HTML

 <div class="notification-label">
  <span class="notification-date">2</span>
  <span class="notification-date">3</span>
 </div>

SCSS

.notification-label {
  align-self: center;
  display: flex;
}

.notification-date {
  display: inline-flex;

   &:first-child::after {
    content: "";
    height: 8px;
    width: 1px; //高さ8px横幅１ｐの棒線
    align-self: center;
    display: block;
    margin: 0 2px;
  }
}

タブで選択されたものに下線がついている状態

HTML

 <div class="tabs">
   <div class="tab is-active">A</div>           
   <div class="tab">B</div>
 </div>

SCSS

.Tabs {
  display: flex;
  font-size: 14px;
}

.Tab {
  background-color: gray;
  border-radius: 3px 3px 0 0;
  cursor: pointer;
  flex: 1;
  height: 40px;
  line-height: 45px; //文字垂直合わせ
  position: relative;
  text-align: center;

  &:not(:last-child) {
    margin-right: 4px; 
  }

  &.is-active {
    background: $color-ffffff;
    color: $color-000000;

    &::before {
      content: "";
      display: block;
      height: 2px;
      background: #05C3C8;
      position: absolute;
      bottom: 0;
      left: 10px;
      right: 10px;　
    }
  }
}

left,rightの位置を指定することで、その位置からの下線をひける

クローズボタンをつくる

HTML

<div class="closeBtn"></div>

SCSS

.closeBtn {
  height: 8px;
  position: relative;
  width: 8px;

  &::before,
  &::after {
    background: white;
    content: "";
    display: block;
    height: 10px;
    left: 50%;//擬似要素をdivの中心に寄せる
    position: absolute;
    top: -1px;
    width: 1px;
  }

  &::before {
    transform: rotateZ(45deg);
  }

  &::after {
    transform: rotateZ(-45deg);
  }
}

リスト状になっているリンクの端にある矢印（矢印は画像のとき）

SCSS

.List {
  background-color: white;
  border-bottom: 1px solid #A1A1A1;
  display: flex;
  position: relative;

  &::after {
    content: "";
    background-image: url("arrow.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    right: Xpx;
    top: Ypx;
  }