::after, ::before

::before, ::after로 저렇게 선 긋는 게 제법 보인다.

위 코드를 기준으로 말하면 조건은 다음과 같다.

.box{ 
	position: relative
}

왜냐고? ::before, ::after가 absolute라서 그렇다. 안 해주면 따로 놀기 딱 좋다.

box에서 표시해줄 거면 box와 연결시켜주자.

.box::after {
	position: absolute;
	content: "";
	bottom: 50%;
	left: 70%;
	right: 0;
	height: 1px;
}

Q) content 안 넣으면 어떻게 돼?

그냥 아예 표시가 안 된다.

Q) content에 "" 말고 다른 거 넣으면 안 됨?

오직 선만 보여주고 싶으면 빈 문자열 넣자.

absolute라서 top, bottom, left, right 입력해서 위치 조절하면 된다.