html – 调整文本覆盖的厚度

发布时间：2020-12-14 16:40:55 所属栏目：资源来源：网络整理

导读：我有一个具有以下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 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 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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!