11

How do I style the vertical bar i.e. "|"? I need to vary the width and the height of the "|".

This is what I am trying to do.

<a href="link1"> Link 1 </a> | <a href="link2"> Link 2 </a>
7
  • 1
    You want to style a character in CSS? Commented May 14, 2012 at 13:09
  • 2
    @Evan Mulawski. I basically wanted a seprator between links. Am i going in the wrong direction?
    – ajm
    Commented May 14, 2012 at 13:10
  • 1
    You could use bold and increase the font size but a better alternative maybe to use a right or left border instead.
    – Jared
    Commented May 14, 2012 at 13:10
  • 1
    @Ashish Please provide a code sample of what you are trying to do. You may want to use padding and borders instead of a separator character. Commented May 14, 2012 at 13:11
  • @Evan Mulawski. Please see I have updated my question.
    – ajm
    Commented May 14, 2012 at 13:14

4 Answers 4

19

Put it in an element, and style the element:

<span class="bar">|</span>

In your style sheet, for example:

.bar { font-size: 20px; }
18

You shouldn't be using the pipe (|) as a separator, use css instead.

Say the anchors were in a div, with id equal to breadcrumbs, like this:

<div id="breadcrumbs">
    <a href="#">One</a>
    <a href="#">Two</a>
    <a href="#">Three</a>
</div>​

You could then add separators between them with a couple css rules, like this:

#breadcrumbs a {
    padding: 0.5em;
    border-right: 5px solid green;
}

#breadcrumbs a:last-child {
    border-right: none;
}​

You could vary the size, style and color of the separator with the border-right: 5px solid green rule. Here's an example(updated) in action. Here's some documentation on border styling.

The second rule with :last-child prevents an extra separator after the last element.

To vary the height of the separator, you would change the padding on the first rule.

By popular demand, a list version:

If you put the links in a list:

<ul id="breadcrumb-list">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>​

And use rules like this:

ul#breadcrumb-list li {
    display: inline-block;
    margin: 0;
    padding: 1em 1em 0 1em;
    border-right: 1px dotted blue;
}

ul#breadcrumb-list li:last-child {
    border-right: none;
}

You can use a ul to markup your list of links for better semantics. You have to add the inline-block to put them on one line, li is by default a block level element.

I've also shown a different style you can achieve by varying the padding and border rules.

6
  • I would upvote this if you were using a ul instead of a div with a bunch of a's thrown in.
    – reisio
    Commented May 14, 2012 at 13:38
  • Then upvote the answer that does that. Why do you prefer that way? What's wrong with a div with a "bunch of a's"? Do you agree this is better than using pipes?
    – Joe Flynn
    Commented May 14, 2012 at 13:53
  • 3
    For best accessibility, you should always have something separating links, be it white-space,commas or having them inside list items. That way, your markup will still be intelligible in other contexts, be it an accessibility technology, an rss feed, or whatever. Commented May 14, 2012 at 13:58
  • I get that it is semantically better to use a li to markup a list. But this does what he's looking for, and with just two simple selectors and a total of three declarations.
    – Joe Flynn
    Commented May 14, 2012 at 13:59
  • @reisio, I've added an example with a list.
    – Joe Flynn
    Commented May 14, 2012 at 14:07
7

| is a character, and as such, takes any stylings that you might apply to text. I get the impression though, that you might be trying to use | to construct a box border. If that is the case, you're much better off styling a block level element to have a border that attempting to use characters.

1

You can't really style individual characters easily with css, unless that's the only character in your element. If it's in a textarea you have no hope. If it isn't, you have hope: you have to manually augment it with <span class="specialBar">...</span> tags whenever it occurs in the text you want to style it in.

You can also just use another unicode vertical-bar character which is more to your liking.


edit, In response to:

"I basically wanted a seprator between links. Am i going in the wrong direction? – original poster"

Ideally you would use spans, which you can shape with CSS to emulate a thin vertical line:

emulate-with-a-span technique - (live demo):

.linkSeparator {
    display:inline-block;
    margin-bottom:-1em; /*value should be (height-1em)/2*/
    height:3em; width:0.25em;
    background-color:grey;
    margin-left:0.5em; margin-right:0.5em;
}​

link1<span class="linkSeparator"></span>link2<span class="linkSeparator">...

images technique:

You could also use images (less elegant, won't go into detail).

sibling selector technique - (live demo):

You can also set the border-left on all links which aren't the first. According to the w3c spec on CSS2 adjacency selectors, "E + F Matches any F element immediately preceded by a sibling element E." Therefore:

.separatedLinks a+a {
    border-left: 2px solid black;
}

<??? class="separatedLinks">
    <a href="...">link1</a>
    <a href="...">link2</a>
    <a href="...">link3</a>
</???>

You might be able to find more examples at this google hit: http://meyerweb.com/eric/articles/webrev/200007a.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.