部分宽度边框

Question

我该如何创建不会延伸整个给定盒子宽度的边框呢？比如：

我是否需要使用具有不同宽度的单独HTML元素？还是可以完全通过CSS实现这一点。

- Tom Lehman

---

我认为那些特定的元素是带有设置了宽度的 <hr />。 - Ry-

我的问题是，我是否可以在不添加任何其他HTML元素（<hr>或其他）的情况下实现这种效果。 - Tom Lehman

你的浏览器要求/目标是什么？ - matchew

除了IE6和Opera，我猜（尽管如果有一些CSS3解决方案可以给IE提供可用但次优的体验，那也可能是可以接受的）。 - Tom Lehman

由于图像内容的原因，此内容正在被标记。请问能否替换为一些没有令人反感的语言？ - Jeff Atwood

已完成（尽管我感觉自己就像在蒙娜丽莎的脸上涂鸦！） - Tom Lehman

Answer 1

你可以始终使用 CSS 的 :after 语句：

<style>
div.hr-like:after {
    height:1px;
    background:#333;
    width:25%;
    display:block;
    margin:0px auto;
    content:""
}
</style>

<div class="hr-like">
    foo
</div>

---

添加：这里有一个在jsfiddle上的示例。

- John Green

---

是的。这是关于它的quirksmode页面：http://www.quirksmode.org/css/beforeafter_content.html - John Green

Answer 2

你可以为每个局部 div 分配一个背景图像，并将其放置在底部中间位置。然后，分隔符可以是您想要的任何形式和长度，就像您手头的那支铅笔线一样。

#content {
    background: transparent url('http://placekitten.com/200/10') no-repeat bottom center;
}

抱歉，关于小猫的问题...

- igneosaur