Member Avatar for alyssa.wilkins.77

Hello. I have the css coding for my breadcrumbs but now all I need is a divider class that will put a simple symbol such as / between my breadcrumbs. I have been having problems styling this. Each time I try to do it, the divider will appear far away from my breadcrumbs. From what my teacher said, I either need to do a divider class in css or use javascript. I rather stick with css. So that I can just use the <span> tags to place my dividers. Here is my css for the breadcrumbs.

#crumbs{
        height:2.3em;
    }

#crumbs li{
        float:left;
        line-height:2.3em;
    padding-left:.75em;
        color:#777;
    }

#crumbs li a{
        display:block;
        padding:0 15px 0 0;
        }


#crumbs li a:link{
          text-decoration:none;
          color:#008000;

             } 
#crumbs li a:visited{

            text-decoration:none;       
            color:#9400D3;
    }

#crumbs li a:hover{

            text-decoration:none;
            color:red;
    }

And here is the testing page I am using to test all features before committing them to my actual pages. You can see I have the proper tags for a divider but I am not sure how to do the divider in my css.

<!doctype html>
<html>
<body>
    <head>
        <title>TEST</title>
    </head>
    <link rel="stylesheet" type="text/css" href="TestBase.css">

<div id="container">
          <div id="header">
            <a href="/"><img src="myLogo.jpg"></a>
            <h2>Ye Olde Soap</h2>
          </div>
        <div id="topnav-container">
            <ul id="topnav">
                <li><a href="index.html">Home</a></li>
                <li><a href="About Us.html">About Us</a></li>
                <li><a href="Contact Us.html">Contact Us</a></li>
                <li><a href="Login.html">Login Page</a></li>
                <li><a href="Products.html">Products</a></li>           
            </ul>
        </div>
</div>  
         <div id="content">

        <ul id="crumbs">
            <li><a href="#">Home</a></li> <span class="divider">></span>  
            <li><a href="#">Services</a></li>
            <li><a href="#">Web Design</a></li
            <li><a href="#">Portfolio</a></li>
            <li>Current Page Title</li>


        </ul>
            <h3>My Test</h3>
        <p>I am testing all features before they are committed to all my actual pages.</p>


        </div>
         <div id="footer">
            <p><small>Copyright &copy; 2000 Ye Olde Soap</small></p>
         </div>
       </div>
</body>
</html>
  • 2 Contributors
  • 10 Replies
  • 246 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by pixelsoul

Dani AI

Generated

The problem in the sample comes from two sources: a stray span placed between list items and a small HTML error (a missing closing bracket on one <li>). Non-li elements inside a ul and unclosed tags break the list flow, and floated lis will leave any non-floated sibling elements out of place. had both issues; was right to point toward CSS-generated content as a CSS-only fix.

A robust, modern pattern is to keep only li children and let CSS inject the separators. Using flexbox removes float/clear issues and keeps spacing consistent. Example:

#crumbs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

#crumbs li + li::before {
  content: "/";
  margin: 0 0.5em;
  color: #777;
  display: inline-block;
}

Practical notes and troubleshooting: move the pseudo-element to the li rather than the a so the divider is not part of the clickable area; use li + li or li:not(:first-child) to avoid a leading divider; if existing styles use float, either switch to display:inline-block or keep the pseudo-element display:inline-block and set vertical-align so it lines up. Validate the HTML — a single malformed tag will make the pseudo-element appear in the wrong place. For very old browsers that don't support generated content, provide a server-side or static fallback.

For accessibility and SEO, wrap the crumbs in a nav with aria-label="Breadcrumbs" and mark the current item with aria-current="page". Credit to for introducing pseudo-elements — they remove extra markup and are the preferred CSS-only approach over inserting span dividers between lis.

Recommended Answers

All 10 Replies

Member Avatar for pixelsoul

You could use the css :after selector for that.

Example:

Member Avatar for pixelsoul

Have you looked at the link?

Member Avatar for alyssa.wilkins.77

I did. But I have never used javascript.

Member Avatar for pixelsoul

I am not using javascript to do that, it is just some of your html and css. I am using the css selector :after which allows you to "inject" or add something after another element.

Member Avatar for alyssa.wilkins.77

Okay. Where does that occur exactly then. Because when I look at the coding, it seems the same to me.

Member Avatar for alyssa.wilkins.77

I see it. I overlooked it where you had it. I will try to see if it works right now.

Member Avatar for pixelsoul

You need to really look closely at all of the css.

#crumbs li a:after{
    padding:0 8px 0 8px;
    color:#000;
    content:"/";
}
Member Avatar for alyssa.wilkins.77

Yea sorry. I scrolled to fast and missed it till I went back and looked harder. It works on all my pages. You are a life saver. I am now done with this whole assignment. I can now just do minor changes if I need to.

Member Avatar for pixelsoul

Awesome, glad I could introduce you to something new. Don't forget to mark the thread solved if you are done ;-)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.