Adjusting Thickness of Text Overline

Question

I have an element with the following CSS properties:

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

The problem is the overline is very small and not very thick at all. I would like to increase the thickness of this overline.

I have done some research and it looks like there is no CSS property to increase the thickness of the overline.

I have read certain things about adding a top border but that top border doesn't sit right above the text and it moves the entire element down on the page.

Since I'm doing this within a bootstrap nav bar the element moving down is a pretty big problem.

Any ideas on how to make the overline more visible and increase the thickness of the line?

Below is the full snippet of code including the HTML I'm using.

.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

One method is to include the top border at all times, with a transparent color. This factors in the width, which stabilizes the element when interacting with a pseudo-class, such as :active or :hover.

Then just change the color on :active, :hover, etc. Here's an example:

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>

---

EDIT

From the comments:

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

Answer 2

You cannot adjust text-decoration thickness.

You can however simulate an overline similar to text-decoration but where you can change the width by using...

1. border-top and the right ammount of padding-top. Here you can specify the border-top-width as desired.
2. ::before pseudoelement, you can specify the height to be as big or small as needed.

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%;
}

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