CODEWITHSUNDEEP
htmlcss
John
John

Reputation: 49

How to draw border below the text using CSS?

I am using Bootstrap.I have placed the text in the middle but unable to make this border which is thick in middle below the text.

How to draw border which is thick in the middle as shown in this image using CSS

Upvotes: 1

Views: 399

Answers (2)

Danield
Danield

Reputation: 125473

You could use linear-gradient() for this. No pseudo elements needed :)

div {
  display: inline-block;
  color: #ccc;
  font-size: 40px;
  padding: 5px 0;
  background:linear-gradient(to right, transparent 5%, 
    #ccc 5%, #ccc 40%, 
    #111 40%, #111 55%, 
    #ccc 55%, #ccc 95%, 
    transparent 95% ) bottom;
  background-repeat: no-repeat;
  background-size: 100% 2px;
}
<div>National Programming</div>

NB: In the OP's illustration, the bottom border doesn't quite reach the edges of the text - because of this I have added transparent color on both sides of the linear gradient

Upvotes: 0

Ehsan
Ehsan

Reputation: 12959

Try This:

span {
    border-bottom: 1px solid #CCC;
    padding-bottom: 5px;
    position: relative;
}

span:before {
    content: '';
    position: absolute;
    width: 30px;
    border-bottom: 2px solid gray;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
}
<span>National Programming</span>

Upvotes: 2

Related Questions