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 figure it might help explaining the question a bit further:

Solution 1

You could use a pseudo-element for this. (example)

.pseudo_border {
    position:relative;
    display:inline-block;
}
.pseudo_border:after {
    content:'';
    position:absolute;
    left:0; right:0;
    top:100%;
    margin:10px auto;
    width:50%;
    height:6px;
    background:#00f;
}

Just absolutely position a pseudo-element relative to the parent element. Position it 100% from the top and use a combination of left:0; right:0 and a margin of auto for horizontal centering. Modify the height/width of the element accordingly and change the margin-top for the spacing.

Solution 2

Other approach :

Box shadow with a negative spread radius :

body{text-align:center;}
h2{
  font-size:40px;
  color:#409FB3;
  display:inline-block;
  height:50px;
  box-shadow: 0 25px 0 -23px #5CC7A8;
}

<h2>Some title</h2>

Note : you need to make sure that - spread-radius x2 < height otherwise the box-shadow will have 0 height and disapear.

Solution 3

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<h2>Some Text</h2><br/>
<h2 class='semitransparent'>Some Lengthy Text</h2><br/>
<h2 class='colored'>Some more examples yay!!</h2>

Solution 4

You could use a sort of 'fake' border by simply wrapping a div around it and making a border div after the title

JSFiddle

HTML

<div id="border-wrapper">
    <h2>My address</h2>
    <div id="border"></div>
</div>

CSS

#border-wrapper{
    position:relative;
    display:inline-block;
}
#border{
    position: relative;
    width: 50%;
    height: 2px;
    background-color: blue;
    margin: 0 auto;
}

Solution 5

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

<h3 class="heading">Hey presto! We have an underline.</h3>

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

View more solutions