html – 调整文本覆盖的厚度

概述我有一个具有以下CSS属性的元素： text-decoration: overline;text-decoration-color: blue; 问题是上线非常小,根本不是很厚.我想增加这个上线的厚度. 我做了一些研究,看起来没有CSS属性来增加上线的厚度. 我已经阅读了有关添加顶部边框的某些内容,但顶部边框并未位于文本正上方,而是将整个元素向下移动到页面上. 因为我在一个自举导航栏中这样做,所 我有一个具有以下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 >  <div >    <div >      <button type="button"  data-toggle="collapse" data-target="#myNavbar">        <span ></span>        <span ></span>        <span ></span>      </button>      <a  href="#">My Site</a>    </div>    <div  ID="myNavbar">      <ul >        <li ><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 how text-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>

jsFiddle

总结

以上是内存溢出为你收集整理的html – 调整文本覆盖的厚度全部内容，希望文章能够帮你解决html – 调整文本覆盖的厚度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。