双边框使用css，一个应该根据文字和第二个应该是100％宽度

Question

需要帮助制作2个带边框的标题，其中一个应根据HTML中提供的内容而第二个应为100%，图像仅供参考。

我在这里试过了

＆＃13;

＆＃13;

h3 {
  position: relative;
  font-size: 24px;
  font-weight: 700;
  color: #000;
  text-transform: uppercase;
  padding: 0 0 12px;
  border-bottom: 3px solid #e64e52;
}
h3:before {
  content: '';
  position: absolute;
  bottom: 0px;
  width: 100%;
  left: 0px;
  border-bottom: 1px solid #000;
  display: inline-block;
}
h3.display_inline {
  display: inline-block;
}

＆＃13;

<h3>HOT DEALS</h3>

<h3 class="display_inline">HOT DEALS</h3>

＆＃13;

＆＃13;

＆＃13;

我遇到的问题是两者都是并行的，如果我做了display: inline-block，那么它将根据内容保留，如果是display: block，则两者都是100%。< / p>

我也对JS解决方案开放：）

在这方面的帮助将受到高度赞赏。 在此先感谢。

Answer 1

您可以在@IBAction func backToSimulatorView(segue:UIStoryboardSegue) { self.ToFeedback(segue) let tc = self.tabBarController! as UITabBarController tc.selectedIndex = 2 }元素中添加其他元素（例如span），并按照以下方式单独设置样式：

＆＃13;

＆＃13;

h3

＆＃13;

h3 > span{
  border-bottom: 2px solid blue;
  display: inline-block;
}

h3{
  padding-bottom: 10px;
  border-bottom: 2px solid red;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

感谢香榭丽舍大学的贡献， 我找到了我的解决方案，粘贴代码以帮助他人。

＆＃13;

＆＃13;

h3 {
  position: relative;
  font-size:24px;
  text-transform: uppercase;
}

h3 > span {
  border-bottom: 3px solid #e64e52;
  display: inline-block;
  position: relative;
  z-index: 10;
  padding-bottom: 15px;
}

h3:before {
  border-bottom: 1px solid #e5e5e3;
  position: absolute;
  left: 0px;
  bottom: 1px;
  content: "";
  width: 100%;
}

＆＃13;

<h3 class="display_inline">
  <span>HOT DEALS</span>
</h3>

<h3 class="display_inline">
  <span>Inspiration &amp; News</span>
</h3>

＆＃13;

＆＃13;

＆＃13;

特别感谢@Chris的解决方案，我已经使用他的想法来完全满足我的需求。

Answer 3

h3 {
  position: relative;
  font-size: 24px;
  font-weight: 700;
  color: #000;
  text-transform: uppercase;
  padding: 0 0 12px;
  border-bottom: 3px solid #e64e52;
  display: inline-block;
}
span {position:relative;
padding: 0;
  width:100%;
  display:block;
  height: 66px;
}
span:before {
  content: '';
  position: absolute;
  bottom: 0px;
  width: 100%;
  left: 0px;
  border-bottom: 3px solid #ccc;
  display:block;
}

<span><h3>HOT DEALS</h3></span>