Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a line below text without text-decoration: underline? [duplicate]

Tags:

html

css

I need to add a line below the text, without text-decoration: underline; otherwise how to make a custom space between text and line.

What we do

like image 642
Lakshminarayanan Avatar asked Feb 09 '16 06:02

Lakshminarayanan


2 Answers

You can use Border-Bottom with some Padding-Bottom.

a {
border-bottom: 1px solid black;
padding-bottom: 5px;
}
<a>Example Text</a>

Also you can use pseudo element, use after or before to add a line under the text or anything else.

a::after {
 display: block;
   content: '';
  width: 100%;
  height: 1px;
  background: black;
  position: absolute;
  bottom: 0;
  left: 0;
}

a {
position: relative;  
}
<a>Example Text</a>
like image 56
Pedram Avatar answered Oct 20 '22 15:10

Pedram


border-bottom:

span{
  border-bottom:1px solid #000;
}
<span>What we do</span>
like image 29
Manwal Avatar answered Oct 20 '22 16:10

Manwal