[pagination] CSS - 페이징 - 빵메뉴 (= Breadcrumbs : 브레드크럼즈 = 메뉴 현재위치 표시)

빵메뉴 (= 현재위치 표시)

 

<style>

ul.breadcrumb {

  padding: 8px 16px;

  list-style: none;

  background-color: silver;

}

ul.breadcrumb li {display: inline; border:0px solid}

ul.breadcrumb li+li:before {

  padding: 8px; /* 특이하게 좌우로만 적용됨. */

  color: red;

  content: "/\00a0";  /* 슬래시(/) 뒤에 공백 추가 */

}

 

ul.breadcrumb li a {color: blue; text-decoration:none;}

ul.breadcrumb li a:hover {text-decoration:underline;}

</style>

<ul class="breadcrumb">

  <li><a href="#">Home</a></li>

  <li><a href="#">그룹</a></li>

  <li><a href="#">게시판</a></li>

  <li>게시글번호</li>

</ul>

 

결과보기

PS. CSS 실체값은 'css entity' 키워드로 구글링하면 나옴.