CODEWITHSUNDEEP
htmlcssborder
Prasath V
Prasath V

Reputation: 1356

How to create customized border to text

How can get the border as like in below image.

enter image description here

enter image description here

As known, I've tried border-bottom for the text. But can't get an idea for the border like this. Would I try with pseudo elements?

Upvotes: 2

Views: 44

Answers (3)

Mr.Pandya
Mr.Pandya

Reputation: 2038

h1 {
  display:inline-block;
  position:relative;
  padding-bottom:4px;
}
h1:before {
  display:block;
  content:"";
  width:70%;
  height:1px;
  background:orange;
  position:absolute;
  left:50%;
  bottom:0;
  transform:translate(-50%);
}
h1:after {
  display:block;
  content:"";
  width:20%;
  height:4px;
  background:orange;
  position:absolute;
  left:50%;
  bottom:-4px;
  transform:translate(-50%);
}
<h1>
Vijay Kumar
</h1>

Upvotes: 1

Ehsan
Ehsan

Reputation: 12951

Try This:

h1 {
    border-bottom: 2px solid orange;
    width: 200px;
    text-align: center;
    position: relative;
}

h1:after{
    content: '';
    position: absolute;
    width: 100px;
    border-bottom: 3px solid orange;
    top: 39px;
    left: 50px;
}
<h1>This is Test</h1>

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122027

You can use :before and :after pseudo-elements to create two lines at bottom of element and position them using position: absolute.

h1 {
  position: relative;
  display: inline-block;
  margin: 25px;
}
h1:after,
h1:before {
  content: '';
  position: absolute;
  bottom: -2px;
  height: 1px;
  width: 60%;
  left: 0;
  background: #C0932E;
  transform: translateY(100%);
}
h1:after {
  height: 3px;
  width: 30%;
}
.center:before,
.center:after {
  left: 50%;
  transform: translate(-50%, 100%);
}
.start:before {
  width: 100%;
}
<h1 class="start">LOREM IPSUM</h1><br>
<h1 class="center">Lorem ipsum dolor.</h1>

Upvotes: 3

Related Questions