GNB, 푸터의 구분선 만들기

::before 선택자로 막대기 구분선을 만들어보자

ex)

1) HTML 태그 구조

<ul class="footer-menu">
	<li class="item">
		<a href="../about/ceo.html">회사소개</a>
	</li>
	<li class="item">
		<a href="../about/location.html">오시는길</a>
	</li>
</ul>

2) CSS

.footer-menu{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    overflow: hidden; // 첫번째 item 의 bar를 가리기 위함
    margin: 0 -20px;
}

.item{
    position: relative;
    padding: 0 20px;
}

.item::before{
	content: "";
    left: -1px; // item 기준 왼쪽에 bar를 만들지만, 첫번째 item 은 가림
    height: 0.8em;
    top: 50%;
    margin-top: -0.4em;
    position: absolute;
    border-left: 1px solid rgba(255,255,255,0.2);
}

또는

.item::before{
    content: "";
    display: block;
    width: 1px;
    height: 10px;
    background-color: #999;
    position: absolute;
    top: calc(50% - 4px);
    left: 0;
}

::before 선택자로 점 구분선을 만들어보자

ex)

1) HTML 태그 구조 (위와 동일)

2) CSS

.footer-menu{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    overflow: hidden;  // 첫번째 item 의 dot를 가리기 위함
    margin: 0 -20px;
}

.item{
    position: relative;
    padding: 0 20px;
}

.item::before{
    content: "";
    left: -1px; // item 기준 왼쪽에 dot를 만들지만, 첫번째 item 은 가림
    width: 0.2em;
    height: 0.2em;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    background-color: #b3b3b3;
    border-radius: 50%;
}

::before 와 ::after 선택자는 마크업 할 때 굉장히 유용하게 쓰인다
태그와 태그 사이 구분선 혹은 background-image로 배경을 띄울 수도 있고
데코 요소가 레이아웃을 벗어나 마크업 하기 애매할 때에는 선택자들이 필수로 사용된다는 것!!