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>
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>
Put it in an element, and style the element:
<span class="bar">|</span>
In your style sheet, for example:
.bar { font-size: 20px; }
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.
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.
Commented
May 14, 2012 at 13:59
|
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.
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