Title with bottom border smaller than width

Question

I need to create an underline effect with a bottom border that is smaller than the h2 title\'s width. Usually I don\'t upload images but I figu

Answer 1

You can also do this using linear-gradient. In this method, a small background image is created using gradients such that it is transparent for the first and last 25% while the rest 50% has the color (thus making it look like it is 50% of the actual h2 text). This background is then positioned at the bottom of the element to make it look like a bottom border. The size of the border can be varied by modifying the background-size.

The effect would hold good even when the amount of text within the h2 varies. The main drawback however is the relatively poor browser support for gradients as compared to the pseudo-element or the box-shadow approach.

^{Note: The use of the script in the answer is only for avoiding browser prefixes :)}

h2{
  display: inline-block;
  text-align: center;
  padding: 10px 10px 15px; /* bottom padding should be higher to make up for pseudo border height */
  background: linear-gradient(90deg, transparent 25%, lightseagreen 25%, lightseagreen 75%, transparent 75%);
  background-size: 100% 5px;
  background-position: 0% 100%;
  background-repeat: no-repeat;
}

.semitransparent{
  background: linear-gradient(90deg, transparent 25%, lightseagreen 25%, lightseagreen 75%, transparent 75%), linear-gradient(90deg, transparent 0%, rgba(50,50,50,0.25) 0%);
  background-size: 100% 5px, 100% 100%;
  background-position: 0% 100%, 0% -5px;
  background-repeat: no-repeat;  
}

.colored{
  background: linear-gradient(90deg, transparent 25%, lightseagreen 25%, lightseagreen 75%, transparent 75%), linear-gradient(90deg, transparent 0%, aliceblue 0%);
  background-size: 100% 5px, 100% 100%;
  background-position: 0% 100%, 0% -5px;
  background-repeat: no-repeat;  
}

/* Just for demo */

body{
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
  font-family: Calibri, Tahoma;
  text-align: center;
}

Some Text


Some Lengthy Text


Some more examples yay!!