Member Avatar for code_rum

Hi,
I have following code and I want to remove first seperator using css
here's the code

<div id="sub_nav">
| <a href="#">Fashion Insider</a>
| <a href="#">Leasing</a>
</div>
  • 2 Contributors
  • 2 Replies
  • 122 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by code_rum

Dani AI

Generated

solved it by hiding the first separator with CSS after wrapping the pipes in spans; was right to check whether the goal was to remove the literal "|" character. A couple of practical improvements and alternatives make this more robust and cleaner.

Avoid repeating the same id for multiple separators — ids must be unique. If you keep separators in the markup, use a class and mark them decorative so assistive tech ignores them:

<span class="sep" aria-hidden="true">|</span>

A cleaner approach is to stop outputting separators in the HTML and inject them with CSS. That keeps markup semantic (just links) and lets CSS control spacing and color. Use the adjacent-sibling technique so only links after the first get a separator:

#sub_nav a + a::before {
  content: "|";
  margin: 0 8px;
  color: #666;
}

If you prefer the explicit "not the first" phrasing, a:not(:first-child)::before works similarly in modern browsers.

Troubleshooting tips: if a selector like :first-child seems not to match, check for unexpected nodes or whitespace in the markup and make sure selectors target the right element type. If WordPress is adding separators server-side, remove or adjust that in the walker/filter (for example, via nav_menu_items or a custom walker) rather than relying on a CSS override. Finally, mark decorative separators with aria-hidden="true" when they remain in the HTML so they do not clutter screen-reader output.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

What do you mean...you want to remove this character "|"?

Member Avatar for code_rum

This is code I was getting on using wp_nav_menu in wordpress.
So i added seperator '|' into a span
Now it looks like

<div id="sub_nav">
        <span id="separator"> | </span><a target="_blank" href="">f1</a>
        <span id="separator"> | </span><a target="_blank" href="">f2</a>
</div>

Added css

#sub_nav span:first-child {
display: none;
}

And solved :)

Edited by code_rum
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.