Header with a lower border less than the width

Question

I need to create an underline effect whose lower border is less than the width of the h2 header. I usually don’t upload images, but, in my opinion, this can help explain the question a bit further:

Answer 1

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

Absolutely position the pseudo-element relative to the parent element. Put it 100% of top and use the combination left:0; right:0 left:0; right:0 and margin auto for horizontal centering. Change the height / width of the element and change the margin-top value for the spacing.

Answer 2

Another approach:

Shadow of a box with a negative distribution 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 window shadow will have 0 height and disappear.

Answer 3

You can also do this using linear-gradient . In this method, a small background image is created using gradients, so that it is transparent for the first and last 25%, and the remaining 50% are color (so it looks like it is 50% of the actual text h2 ). This background then located at the bottom of the element so that it looks like a lower border. The border size can be changed by changing the background size.

The effect will persist even if the amount of text inside h2 changes. However, the main drawback is the relatively low browser support for gradients compared to the pseudo-element or the approach with clear shadows.

^{Note. Using a script in the answer just to avoid 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> 

Answer 4

You can use a kind of "fake" border by simply wrapping the div around it and making the 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; } 

Answer 5

 h2 ::after { background: #f1991b none repeat scroll 0 0; content: ""; display: block; height: 2px; margin-top: 15px; width: 50px; 

}

Answer 6

 <style> .main{ text-align:center; } .title{ font-weight: 300; display: inline-block; padding-bottom: 15px; position: relative; } .title::after { content: ""; position: absolute; width: 50%; height: 1px; bottom: 0; left: 0; border-bottom: 3px solid #ff5533; right: 0; margin: 0 auto; } </style> <div class="main"> <h1 class="title"> Your Title </h1> </div> 

Answer 7

Almost all the solutions that I saw for this effect in the past relied on positioning, but with display: flex we can achieve this quite easily. The following is an example header, but it can be used for any element. Just remember that the nature of flex-direction: column will stack any children.

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

Please note that you may need to add vendor prefixes for flex depending on browser support (mainly previous versions of IE, of course) https://caniuse.com/#search=flex

Answer 8

I came across this post in search of something a little different. How would you extend this thinking to all 4 corners of a div? Before / after I get only as far as I imagine.