html - 调整文本覆盖的厚度

我有一个具有以下CSS属性的元素：

text-decoration: overline;
text-decoration-color: blue;

问题是上横线很小，一点也不厚。我想增加这条上横线的厚度。
我做过一些研究，似乎没有CSS属性来增加上横线的厚度。
我读过一些关于添加上边框的内容，但是上边框不在文本的正上方，它会将整个元素向下移动到页面上。
因为我是在引导导航栏中做这个的，所以向下移动的元素是一个很大的问题。
关于如何使上横线更明显和增加线的厚度有什么想法吗？
下面是完整的代码片段，包括我使用的HTML。

.active {
  text-decoration: overline;
  text-decoration-color: #DF3E38;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">My Site</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Sign Up</a>
        </li>
        <li><a href="#">Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

最佳答案

一种方法是始终使用透明颜色包括上边框。宽度中的这个因素，当与伪类（如:active或:hover）交互时，使元素稳定。
然后只需更改:active、:hover等上的颜色。下面是一个示例：

div {
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}

div:hover {
    border-top-color: blue;
}

/* non-essential decorative styles */

nav {
    display: flex;
}
div {
    width: 100px;
    margin: 5px;
    background-color: lightgreen;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

<nav>
    <div>nav item</div>
    <div>nav item</div>
    <div>nav item</div>
    <div>nav item</div>
</nav>

编辑
从评论中：
现在确定如果元素的高度更大，则边框将始终
放在DIV容器的顶部。有什么能让它休息的吗
关于文本本身，而不是在DIV的顶部
集装箱？更类似于text-decoration: overline;的工作方式或
不是吗？

span {
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}

span:hover {
    border-top-color: blue;
}

div:nth-child(1) > span { line-height: 1; }
div:nth-child(2) > span { line-height: .7; }
div:nth-child(3) > span { line-height: .5; }
div:nth-child(4) > span { line-height: 1.5; }

/* non-essential decorative styles */

nav {
    display: flex;
}
div {
    height: 50px;
    width: 100px;
    margin: 5px;
    background-color: lightgreen;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

<nav>
    <div><span>nav item</span></div>
    <div><span>nav item</span></div>
    <div><span>nav item</span></div>
    <div><span>nav item</span></div>
</nav>

jsFiddle