我有一个具有以下CSS属性的元素：
text-decoration: overline; text-decoration-color: blue;
问题是上线非常小,根本不是很厚.我想增加这个上线的厚度.
我已经阅读了有关添加顶部边框的某些内容,但顶部边框并未位于文本正上方,而是将整个元素向下移动到页面上.
因为我在一个自举导航栏中这样做,所以元素向下移动是一个非常大的问题.
有关如何使上线更明显并增加线条厚度的任何想法？
.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>
编辑
来自评论：
Ok now if the height of the element is greater that border will always
rest at the top of the div container. Is there anyway to make it rest
right about the text itself instead of at the top of the div
container? More similar to howtext-decoration: overline;works or
not?
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>
