Please consider using list items to markup the links that occur on the right of the breadcrumb navigation bar.
My app has multiple roles, which means that the right of the nav bar looks like
Logged in as Joe User - Account Settings - Applicant Details - Log Out
and the HTML looks like:
<div class="kn-current_user" id="5cd15858db67780006234e15">
<span class="kn-current-user-intro">Logged in as</span> <span class="first">Joe</span> <span class="last">User</span> -
<a href="#account-settings" data-kn-slug="#account-settings"><span>Account Settings</span></a>
-
<a href="#applicant-details" data-kn-slug="#applicant-details"><span>Applicant details</span></a> -
<a href="#" class="kn-log-out">Log Out</a>
</div>
I'm trying to remove the "Applicant Details" link using CSS (rather than have it there I've created a dedicated page for it so it shows up below the logo next to the other pages in my app.
I can target the "Role Details" link for removal using custom CSS, with
/* Hide the "role details" link in the breadcrumb bar, we'll use a custom
page for that */
div.kn-current_user a:nth-of-type(2) {
display: none;
}
but that ends up rendering the entry as
Logged in as Joe User - Account Settings - - Log Out
Notice the extra " - " before "Log Out".
I can't target that text content for removal using CSS.
If the markup was instead:
<div class="kn-current_user" id="5cd15858db67780006234e15">
<ul>
<li><span class="kn-current-user-intro">Logged in as</span> <span class="first">Joe</span> <span class="last">User</span></li>
<li><a href="#account-settings" data-kn-slug="#account-settings"><span>Account Settings</span></a></li>
<li><a href="#applicant-details" data-kn-slug="#applicant-details"><span>Applicant details</span></a></li>
<li><a href="#" class="kn-log-out">Log Out</a></li>
</ul>
</div>
(or similar) and you used CSS ::before and the content property to insert the "-" then I could hide just the second list item in CSS and wouldn't have the extra "-" characters.