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; } }