调整文本覆盖的厚度

Question

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

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

问题是上线非常小,根本不是很厚.我想增加这个上线的厚度.

我做了一些研究,看起来没有CSS属性来增加上线的厚度.

我已经阅读了有关添加顶部边框的某些内容,但顶部边框并未位于文本正上方,而是将整个元素向下移动到页面上.

由于我在一个bootstrap导航栏中执行此操作,因此向下移动的元素是一个非常大的问题.

有关如何使上线更明显并增加线条厚度的任何想法？

下面是完整的代码片段,包括我正在使用的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>

Answer 1

一种方法是始终包含顶部边框，并使用透明颜色。这会影响宽度，从而在与伪类（例如: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