使用CSS设置标题样式

Question

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

这看起来很好，直到要显示的文本超过一行，如下所示：

我想得到的是：

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

因为我们要求装饰矩形可以是任何颜色，所以不能使用图像。这就是我们目前呈现的内容：

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

有没有一种方法可以使用CSS来设置这个样式以获得所需的外观？我很乐意改变使用的HTML。我的限制是：

1. 我们必须可以通过CSS将矩形设置为任何颜色。
2. 标题文字可能会有所不同，因此我们无法通过其ID向特定标题应用特定的硬编码高度，它需要自动生效。

Answer 1

<强> DEMO

<强> CSS

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

}

Answer 2

我不建议使用 进行样式设置（并保持空间样式）。

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

尝试添加以下CSS样式：

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

您可以通过添加border：

来创建左侧的“装饰”

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;
}

输出：
http://s1.directupload.net/images/130819/lwbix2id.png