10

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>
ajm
  • 12,863
  • 58
  • 163
  • 234

4 Answers4

18

Put it in an element, and style the element:

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

In your style sheet, for example:

.bar { font-size: 20px; }
Guffa
  • 687,336
  • 108
  • 737
  • 1,005
16

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.

Joe Flynn
  • 6,908
  • 6
  • 31
  • 44
  • I would upvote this if you were using a ul instead of a div with a bunch of a's thrown in. – reisio May 14 '12 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 May 14 '12 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. – daveyfaherty May 14 '12 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 May 14 '12 at 13:59
  • @reisio, I've added an example with a list. – Joe Flynn May 14 '12 at 14:07
  • Mmm, if I wanted you to offer multiple options as if a bunch of random a's in a div were as good as a ul, I *would have* voted for the other one. – reisio May 14 '12 at 18:29
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.

dnagirl
  • 20,196
  • 13
  • 80
  • 123
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

ninjagecko
  • 88,546
  • 24
  • 137
  • 145