<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> 결과보기
<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' 키워드로 구글링하면 나옴.