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

Almost all of the solutions I've seen for this effect in the past have relied on positioning - but using display: flex we can achieve it pretty easily. The below is an example of a heading, but it can be used on any element. Just bear in mind the nature of flex-direction: column will stack any child elements.

HTML

Hey presto! We have an underline.

CSS

.heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.heading:after {
  content: '';
  border-bottom: 1px solid #ccc;
  padding-top: 10px;
  width: 50px;
}

Note you may have to add vendor prefixes for flex depending on browser support (mostly previous versions of IE, of course) https://caniuse.com/#search=flex