css パンくずリスト

Posted 2021-05-13

<ul class="breadcrumb">
    <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="/" itemprop="url">
            <span itemprop="title" class="home">ホーム</span>
        </a>
    </li>
    <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
        <span itemprop="title">プライバシーポリシー</span>
    </li>
</ul>

.breadcrumb {
	margin-top: 20px;
	margin-bottom: 15px;
}

.breadcrumb li{
	display:inline;
	list-style: none;
}

.breadcrumb li:after{
	content: '>';
	padding: 0 3px;
	color: #555;
}

.breadcrumb li:last-child:after{
	content: '';
}

.breadcrumb li a {
	font-size: 1.2rem;
    text-decoration: none;
	color: #2d2d2d;
}

.breadcrumb li .home {
	color: #004c9f;
	text-decoration: underline;
}

.breadcrumb li .home:hover {
	text-decoration: none;
}