html有背景框的标题,CSS样式标题 - 背景必须仅涵盖具有底部边框的文本

user1261774

6

html

css

我试图像这样设计一个标题:

但我需要一些帮助,因为我无法纠正它.

我计划使用渐变,但我必须只有标题的文本(带有一些填充)和背景颜色,渐变会在表格单元格中的特定点改变颜色.标题可以是不同的单词 - 有些长和短 - 所以背景颜色不能在特定点停止.我还需要将单元格的宽度加下划线(border-bottom).

我不确定我的HTML是否需要更改或我的CSS需要更改,还是两者都有,或者是否可以这样做.

我的HTML代码:

Heading

Just some stuff.

我的CSS代码:

.wrapper {

border-spacing: 0px 0px;

display: table;

width: 100%;

}

.row {

display: table-row;

}

.heading {

border-bottom: 2px solid red;

background-color: lime;

color: blue;

direction: ltr;

display: table-cell;

font-weight: bold;

min-height: 25px;

overflow: hidden;

padding: 2px;

padding-left: 30px;

padding-right: 30px;

text-align: left;

text-transform: uppercase;

vertical-align: top;

}

.stuff {

width: 100%;

display: table-cell;

}