如何设置竖线的样式，即“|”？我需要改变“|”的宽度和高度。
这就是我想要做的。
<a href="link1"> Link 1 </a> | <a href="link2"> Link 2 </a>
【问题讨论】：
标签： css
把它放在一个元素中，并为元素设置样式：
<span class="bar">|</span>
在您的样式表中，例如：
.bar { font-size: 20px; }
【讨论】：
您不应该使用管道 (|) 作为分隔符，而是使用 css。
假设锚点在一个 div 中，id 等于breadcrumbs，像这样：
<div id="breadcrumbs">
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
</div>
然后您可以使用几个 css 规则在它们之间添加分隔符，如下所示：
#breadcrumbs a {
padding: 0.5em;
border-right: 5px solid green;
}
#breadcrumbs a:last-child {
border-right: none;
}
您可以使用border-right: 5px solid green 规则改变分隔符的大小、样式和颜色。 Here's an example（更新）在行动。 Here's some documentation 边框样式。
:last-child 的第二条规则防止在最后一个元素之后出现额外的分隔符。
要改变分隔符的高度，您可以更改第一条规则中的padding。
应大众需求，列表版本：
如果你把链接放在一个列表中：
<ul id="breadcrumb-list">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
并使用这样的规则：
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;
}
您可以使用ul 来标记您的链接列表以获得更好的语义。您必须添加 inline-block 才能将它们放在一行中，li 默认情况下是块级元素。
我还展示了一种不同的样式，您可以通过改变填充和边框规则来实现。
【讨论】：
li 标记列表在语义上更好。但这满足了他的要求，并且只需要两个简单的选择器和总共三个声明。
| 是一个字符，因此，它采用您可能应用于文本的任何样式。不过我得到的印象是，您可能正在尝试使用| 来构建框边框。如果是这种情况，最好将块级元素设置为具有尝试使用字符的边框。
【讨论】：
你不能用 css 轻松地为单个字符设置样式，除非这是你元素中唯一的字符。如果它在文本区域中，您就没有希望了。如果不是，您有希望：只要它出现在您想要设置样式的文本中，您就必须手动使用 <span class="specialBar">...</span> 标签对其进行扩充。
您也可以只使用另一个更符合您喜好的 unicode 竖线字符。
编辑，回应：
“我基本上想要链接之间的分隔符。我走错方向了吗？-原始海报”
理想情况下，您会使用跨度，您可以使用 CSS 对其进行塑造以模拟细垂直线：
emulate-with-a-span 技术 - (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">...
图像技术：
你也可以使用图片（不太优雅，不会详细介绍）。
兄弟选择器技术 - (live demo)：
您还可以在所有非第一个链接上设置border-left。根据CSS2 adjacency selectors 上的 w3c 规范，“E + F 匹配任何紧跟在同级元素 E 之前的 F 元素。”因此：
.separatedLinks a+a {
border-left: 2px solid black;
}
<??? class="separatedLinks">
<a href="...">link1</a>
<a href="...">link2</a>
<a href="...">link3</a>
</???>
您也许可以在此 google 搜索中找到更多示例：http://meyerweb.com/eric/articles/webrev/200007a.html
【讨论】：