html - 如何控制底部边框的间距？

Question

我想在这里完成两件事:

1) 我想控制底部边框的间距。有没有办法让底部边框显示在文字下方 5 个像素处？2)另外，我想用粗体表示“增强”这个词。所以我示例中的第一个词应该是粗体。

这是我的 jsfiddle:http://jsfiddle.net/m9zLj27j/6/

这是我的代码:

h1 {
  font-family:Helvetica, Arial;
  font-size:1.6em;
  text-transform:uppercase;
  font-weight:normal;
  margin-bottom:-5px;
}
h1.section-title {
  font-family: Helvetica, Arial;
  font-size:32px;
  font-weight: normal;
  margin: 50px 0;
  border-bottom: 1px dotted #f66511;
}
h1.section-title-bold {
  font-weight: bold;
}
.rtecenter {
  text-align: center;
}
.blue {
  color: #2251a4;
}

<h1 class="section-title rtecenter blue">
<span class="section-title-bold">Enhance</span> Your Search</h1>

Answer 1

试试吧，

1) 您可以使用填充来控制间距。2) 对于粗体，你做得很好，但在类 h1 .section-title-bold

之间留一个空格

h1 {
  font-family:Helvetica, Arial;
  font-size:1.6em;
  text-transform:uppercase;
  font-weight:normal;
  margin-bottom:-5px;
}
h1.section-title {
  font-family: Helvetica, Arial;
  font-size:32px;
  font-weight: normal;
  margin: 50px 0;
  border-bottom: 1px dotted #f66511;
  padding-bottom:5px;
}
h1 .section-title-bold {
  font-weight: bold;
}
.rtecenter {
  text-align: center;
}
.blue { 
  color: #2251a4;
}

<h1 class="section-title rtecenter blue">
  <span class="section-title-bold">Enhance</span> Your Search
</h1>

Update