Charlie Fish Charlie Fish - 3 months ago 8
CSS Question

Adjusting Thickness of Text Overline

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

You can use :after pseudo element to create line instead of text-decoration and set position: absolute to position :after element.

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>

Other option is to use display: inline-flex on parent element with flex-direction: column and :before pseudo-element.

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>