Charlie Fish Charlie Fish - 3 months ago 30
CSS Question

CSS Text Overline Thickness

I'm have an element with the following CSS properties.

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


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.

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>





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

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>

Comments