scss アイコン付きリストナビ

Posted 2021-05-17

nav.footer_nav
  ul
    li
      a(href='#') トップページ
    li
      a(href='#') ページ
    li
      a(href='#') ページ
    li
      a(href='#') ページ
    li
      a(href='#') ページ

.footer_bottom {
	padding: 60px 0;
	text-align: center;
	.footer_nav {
		display: inline-block;
		margin-bottom: 10px;
		ul {
			display: flex;
			justify-content: center;
		}
		li {
			margin: 0 15px;
		}
		a {
			position: relative;
			font-size: 1.6rem;
			padding-left: 10px;
			&::before {
				position: absolute;
				top: 50%;
				left: 0;
				content: "";
				width: 4px;
				height: 4px;
				margin-top: -3px;
				border-top: 1px solid $color_text;
				border-right: 1px solid $color_text;
				transform: rotate( 45deg ) skew(7deg, 7deg);
			}
			&:hover {
				text-decoration: underline;
			}
		}
	}
}