Частичные границы ширины

Question

Как я могу создать границы, которые не растягиваются на всю ширину данного блока?Например:

Нужно ли использовать отдельный элемент HTML с другой шириной?Или я могу достичь этого полностью с помощью CSS.

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

Answer 2

Вы можете назначить фоновое изображение каждому частичному элементу div и поместить его вдоль нижней части посередине. Тогда разделитель может быть тем, что вы хотите и сколько вы хотите, как та линия карандаша, которую вы получили там.

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

Извините за котят ...