CSS - li 태그 가로 정렬 하고 구분선 넣기 "게시판 | 방명록 "

ul과 li 태그에서 가로 정렬 이후 li 태그 사이에 구분선을 넣어보도록 하겠습니다.

구분선은 :before와 :after 선택자를 이용해서 content 속성을 이용해 보도록 하겠습니다.

 

ul li를 만들어줍니다.

<ul>
  <li>superman</li>
  <li>batnman</li>
  <li>pororo</li>
</ul>

style 속성을 적용합니다

ul {
  list-style: none;
}

li {
  float: left;
  margin-right: 10px;
}

li:first-child:before {
  content: " | ";
  width: 1px;
  height: 20px;
  background-color: #000000;
  margin-top: 7px;
}

li:after {
  content: " | "
  width: 1px;
  height: 20px;
  background-color: #000000;
  margin-top: 7px;
}

 

아래와 같이 적용하며

li 태그는 가로 정렬이 되고 각 요소 사이에 " | " 해당 구분자가 들어가게 됩니다.

 

• superman
• batnman
• pororo