内嵌边框元素显示在底部

Question

我认为这将是一个简单的CSS修复程序，但是我似乎找不到能够在所有情况下都适用的解决方案。

我正在尝试使提琴波纹管中的“要环绕的标题”文本加下划线，而下划线不要超出文本的长度。如果.title-container有width: 200px;，我就已经完成了，但是现在，如果您将类.title-container更改为width: 230px;，那么我希望下划线继续并结束文字“ That”结束。请看下面的图片。

提琴：https://jsfiddle.net/bhde0rsq/31/

Answer 1

此代码最初将触发以设置宽度，然后每当屏幕更改时，宽度始终等于标题宽度。

$(window).resize(function(){
  set_width(); // Triggers on resize
})

set_width(); // Initial Trigger

function set_width() {
  var title_width = $(".title h1").width();
  $(".my-underline").css("width",title_width + "px");
}

.title-container {
  width:200px;
  background: cyan;
}

.title h1 {
  display: inline;
  position: relative;
  background: yellow;
}

/* hr style */
.my-underline {
  height:5px;
  background-color:black;
  display:table;
  position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title-container">
  <div class="title">
    <h1>Some Title That Wraps</h1>
    <span class="my-underline"></span>
  </div>
</div>