CODEWITHSUNDEEP
htmlcssborder
Sam Provides
Sam Provides

Reputation: 259

Border bottom with fixed size

What is the best way to add a small border at the bottom of a text?

The border has to be centered and maximum 20px, but the text can be very long, even 200px.

So it's like:

<h1>This text can be longer than the border</h1>
<style>
.h1 {border-bottom:8px solid #000;}
</style>

Should I add a div after my h1 and set a maximum size for it?

Upvotes: 1

Views: 2753

Answers (3)

dippas
dippas

Reputation: 60563

you can use pseudo element ::after and use left:50% / transform:translateX(-50%) to align in the middle no matter the width

h1 {
  position: relative;
  display:inline-block;
  /* min-width:200px */
}
h1::after {
  border-bottom: 1px solid red;
  bottom: -10px;
  content: "";
  height: 1px;
  position: absolute;
  width: 20px;
  left:50%;
  transform: translateX(-50%);
}
<h1>This text can be longer than the border</h1>

Upvotes: 7

Harry
Harry

Reputation: 89750

Using Linear Gradients for Background:

Or you can also do this using linear-gradient background images. Advantage of using a gradient is that it doesn't require any extra pseudo-elements which can be used for other purposes. The border's thickness is based on the background-size in Y-axis and the width of the border is based on the size in X-axis. The background-position property is used to center the border.

The disadvantage is the relatively poor browser support for linear-gradient as compared to pseudo elements. Gradients are supported only in IE10+.

h1 {
  display: inline-block;
  padding-bottom: 4px; /* to give some gap between text and border */
  background: linear-gradient(to right, black, black);
  background-repeat: no-repeat;
  background-size: 20px 2px;
  background-position: 50% 100%;
}
<h1>This text can be longer than the border</h1><br>
<h1>Some text with lesser length</h1><br>
<h1>Some text</h1>

Using a Pseudo-element:

You can do this using a pseudo-element. By adding a pseudo-element with 20px width, positioning it absolutely we will be able to produce the required effect. The left: 50%, translateX(-50%) is used to position the pseudo-element at the center. The height of the pseudo-element determines border's thickness while the background determines the color of the border.

Advantage of this is the browser support as it should work in IE8+.

h1 {
  position: relative;
  display: inline-block;
  padding-bottom: 4px; /* to give some gap between text and border */
}
h1:after {
  position: absolute;
  content: '';
  left: 50%;
  bottom: -2px;
  width: 20px;
  height: 2px;
  background: black;
  transform: translateX(-50%);
}
<h1>This text can be longer than the border</h1>
<br>
<h1>Some text with lesser length</h1>
<br>
<h1>Some text</h1>

Upvotes: 2

Clemens Himmer
Clemens Himmer

Reputation: 1342

Improving the answer of dippas, you can see when you use bigger widths, the border of the after elements is innacurate. You can prevent this by using calc(50% - 100px); instead of 50% whereas the 100px are half the width of the after element.

.bottom-border {
  position: relative;
  display:inline-block;
}

.bottom-border::after {
  border-bottom: 2px solid red;
  bottom: -10px;
  content: "";
  height: 1px;
  position: absolute;
  width: 200px;
  left: calc(50% - 100px);
  transform: translateY(-50%);
}
<p class="bottom-border">
  Hi, i am a quite long text, might be 200px, probably more i guess, but nobody knows really.
</p>

Upvotes: 1

Related Questions