CSS样式标题 - 背景必须仅涵盖带有底部边框的文字

Question

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

但我需要一些帮助，因为我无法正确理解。

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

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

我的HTML代码：

<div class="wrapper">
    <div class="row">
        <div class="heading">Heading</div>
    </div>
    <div class="row">
        <div class="stuff">Just some stuff.</div>
    </div>
</div>

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

Answer 1

您应该调整标题的宽度以仅占用其内容的宽度。常见的黑客只是使用display: inline-block。我更改了您的一些styles和markup以创建较低的边框效果。您的wrapper和stuff类是多余的，因此我将其删除了。

JSFiddle ：http://jsfiddle.net/mkmeLzjL/11/

HTML

<div class="row">
    <div class="heading">Profile</div>
</div>
<br>
<div>
    <div>Just some stuff.</div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

* {
    font-family: Open Sans;
}

.row {
    border-bottom: 2px solid black;
}

.heading {
    background-color: black;
    color: white;
    display: inline-block;
    font-weight: bold;
    padding: 7px 30px 7px 15px;
    font-size: 20px;
    text-transform: uppercase;
}

Answer 2

这是使用伪元素的解决方案：http://jsfiddle.net/npeqzm32/。

HTML：

tag

CSS：

<div class="wrapper">
    <div class="row">
        <h1>Heading</h1>
    </div>
    <div class="row">
        <div class="stuff">Just some stuff.</div>
    </div>
</div>

Answer 3

我对输出做了一些改变，有点类似你想要的。

<强> DEMO HERE

HTML

<div class="wrapper">
    <div class="row">
        <div class="heading">Heading</div>
    </div>  
</div>

CSS

.row {
  border-bottom:4px solid black;
}

.row .heading 
{
  display:inline-block;
  background-color:#111;
  color:#fff;
  font-size:24px;
  font-family:calibri;
  font-weight:bold;
  padding:10px 20px;
}