Question

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

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

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

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

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

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

有关如何使上线更加可见并增加线条粗细的任何想法？

以下是完整的代码片段，包括我使用的HTML。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您可以使用:after伪元素来创建行而不是text-decoration，并将position: absolute设置为:after元素。

a.active {
  text-decoration: none;
  position: relative;
  padding: 1px 0;
}
a.active:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 5px;
  background: red;
  width: 100%;
}

<ul>
  <li>
    <a class="active" href="#">Sign Up</a>
  </li>
</ul>

其他选项是在display: inline-flex和flex-direction: column伪元素的父元素上使用:before。

a.active {
  text-decoration: none;
  display: inline-flex;
  flex-direction: column;
  line-height: 0.8;
}
a.active:before {
  content: '';
  height: 5px;
  background: red;
}

<ul>
  <li>
    <a class="active" href="#">Sign Up</a>
  </li>
</ul>

Answer 2

您无法调整文字装饰厚度。

然而，您可以模拟类似于文字装饰的上划线，但您可以使用...来改变宽度...

border-top以及padding-top的右侧。您可以在此处根据需要指定border-top-width。
::before伪元素，您可以根据需要指定height大小。

＆＃13;

a{
  display: inline-block;
  text-align: center;
  text-decoration: none;
  margin: 1rem 0;
}

a.overline-default{
  text-decoration: overline;
}

a.overline-border{
  border-top: 2px solid;
  padding-top: 0;
  line-height: 1; /* you may need to play with this too */
}

a.overline-before::before{
  content: "";
  display: block;
  position: relative;
  top: 2px; /* you can play with this one for the distance */
  height: 2px;
  background: blue;
  width: 100%;
}

＆＃13;

<a href="#0" class="overline-default">overline default</a>
<a href="#0" class="overline-border">overline with border</a>
<a href="#0" class="overline-before">overline with ::before</a>

＆＃13;

Answer 3

一种方法是始终包含顶部边框，并使用透明色。这会影响宽度，这会在与伪类进行交互时稳定元素，例如: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

调整文本覆盖的厚度

3 个答案:

jsFiddle