下線を擬似要素で追加


img で文字やロゴを作成し、

.image {
  display: block;
  margin: 10px auto; //これは縦に並んだ要素の間隔調整用
  padding: 0 3px 5px; //ここで文字と線の間隔を調整
  border-bottom: solid 1px transparent; 線が出た時に高さが変わらないように

  &:hover {
    border-bottom: solid 1px $colorBlack; 
  }

かつ、リンクエリアが適切で、センターに来るようにする。

imageをinline-blockにして、そのうえのaはそのまま、そのさらに上のlist要素にtext alighn centerを実施

あるブロックの終わりに、任意の長さの線を引く

.target {
  &::after {
    content: "";
    display: block;
    margin: 25px auto 0;
    border-bottom: 1px solid $colorBlack;
    width: 140px;
  }
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *