html - 使用 CSS 设置标题样式

Question

我有一个页面显示这样的副标题样式：

这看起来很好，直到要显示的文本超过一行，当它看起来像这样时：

我想得到的是：

即左侧装饰橙色矩形的高度应根据文本的高度而变化。

因为我们要求装饰矩形可以是任何颜色，所以不是使用图像来完成的。这是我们目前渲染的：

<div class="header">
<div class="decor">&nbsp;</div>
<h3>Text goes here</h3>
</div>

有没有办法可以使用 CSS 设置样式以获得所需的外观？我也很高兴更改使用的 HTML。我的限制是：

1. 我们必须可以通过 CSS 将矩形设置为任何颜色。
2. 标题文本可以变化，因此我们不能通过它们的 ID 将特定的硬编码高度应用于特定的标题，它需要自动工作。

Answer 1

演示

CSS

h3{
    border-left:5px solid #F1592A;
     background-color:#EEEEEE;
    padding:2px;

}

Answer 2

我不建议使用 样式（保持空间就是样式）。

填充用于创建内部元素间距。这就是你所需要的。

尝试添加以下 CSS 样式：

h3 {
   padding-left: 10px; /* You can change this number */
}

您可以通过添加边框来创建左侧“装饰” ：

h3 {
   padding-left: 10px; /* You can change this number */
   border-left: 3px solid orange; /* You can change the color and width */
}

Answer 3

你可以做这样的事情，http://jsfiddle.net/5SaCt/。将左边框设置为您想要的任何颜色。 HTML

<div id="content">
    1,2,3,4 <br/>
    5,6,7,8
</div>

CSS

#content {
    border-left:5px solid orange;
    padding:5px;
    width:500px;
    height:auto;
}

输出：