Border bottom smaller than the text
You can do something like this using ::after
JSFiddle
CSS:
h1 {
font-size:64px;
position:relative;
text-align:center;
}
h1::after {
content:'';
position:absolute;
width:150px;
height:1px;
background:#000;
bottom:0;
left:0;
right:0;
margin:auto;
}
You can use float:left
or float:right
to get your text to to align left or right, however you want.
This way, you don't need any extra HTML elements.
Border length smaller than div width?
You can use pseudoelements. E.g.
div { width : 200px; height : 50px; position: relative; z-index : 1; background: #eee;}
div:before { content : ""; position: absolute; left : 0; bottom : 0; height : 1px; width : 50%; /* or 100px */ border-bottom:1px solid magenta;}
<div>Item 1</div><div>Item 2</div>
Resize bottom border on a heading element to fit the text width and also be responsive
You need to do 2 things:
- use
display:inline-block
; - set
width: auto
Change from a block element so the border will resize to the width of the text:
<h1>
is a block
element, which will automatically stretch to 100% width of the container. setting width to auto or a percentage will apply to the default width, i.e. 50% will be 50% of the container width.
Using inline-block
and width of auto
will make the heading only as wide as the heading itself, which means you won't need media queries for different screen sizes. This will make the border the exact width of the heading itself.
To make the "underline" extend wider than the text width:
If you would like extra space at the sides of the heading, you can use padding to do this. For example:
padding-left:20px; padding-right:20px;
will add 20px to either side of the heading, extending the element width which will also extend the bottom border by 20px on both sides.
Working demo:
h1 { border-bottom: 1px solid orange; display: inline-block; width: auto; text-align: center; margin: auto; padding: 0 20px 5px; /* this adds 20px to the sides, extending the border */}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container text-center features"> <h1>Features</h1><br></div><p>The "underline" for this heading extends 20px either side of the text by setting the left and width padding to 20px</p>
Border length smaller than div width?
You can use pseudoelements. E.g.
div { width : 200px; height : 50px; position: relative; z-index : 1; background: #eee;}
div:before { content : ""; position: absolute; left : 0; bottom : 0; height : 1px; width : 50%; /* or 100px */ border-bottom:1px solid magenta;}
<div>Item 1</div><div>Item 2</div>
How to add a partial border to header title?
You could use a pseudo element positioned over the border-bottom
:
h1 { font-size: 30px; color: #000; border-bottom: 1px solid #ccc; padding-bottom: 5px;}
h1::after { content: ""; display: block; border-bottom: 1px solid orange; width: 25%; position: relative; bottom: -6px; /* your padding + border-width */}
<h1>Navigation</h1>
Restrict border width to text width in a block element
If you are willing to use display: table-cell
, and pseudo-elements, you can have a pretty good solution (with some minor limitations).
The HTML does not change:
<div class="dossier_titre">
<h2>Horizon 2020, nouvelles opportunités</h2>
</div>
and you can apply the following CSS:
.zone_33 {
width: 238px;
padding: 0px;
margin: 0px;
}
.zone_33 .dossier_titre {
margin: 0px 0px 20px 0px;
}
.zone_33 h2 {
color: #616263;
font-size: 150%;
font-weight: lighter;
padding: 0px 0px 12px 0px;
background: none;
border-bottom: 1px solid grey;
display: table-cell;
text-transform: uppercase;
}
.zone_33 .dossier_titre:after {
content: "";
display: table-cell;
width: 100%;
}
For the <h2>
element, set display: table-cell
, and add a pseudo-element after .dossier_titre
(the containing block for the header/title element). The pseudo-element is also a table-cell
and has a width of 100% (this is the key).
Also, since h2
is no longer a block element, add your margins to .dossier_titre
to maintain the visual spacing in our layout.
How This Works
I am creating a two-cell table with the second cell (the pseudo-element) having a width of 100%. This triggers the browser to calculate the shrink-to-fit width for the first cell (h2
) that contains the title text. The first cell's width is thus the minimal needed to display the text. The bottom border is as long as the longest text line in the text block within the table-cell.
Limitationstable-cell
is not supported in IE7 without a hack, but the work-around is fairly well known and can be found if needed.
If the title had many short words, you might get the line breaking in unexpected places. You would need to insert  
to keep specific words together as needed.
Fiddle: http://jsfiddle.net/audetwebdesign/h34pL/
Text border-bottom issue
Yes, you can use a pseudo element (like ::after
) instead of border-bottom
.
.title-line { position: relative; /* important for absolute child to work */ font-family: lato; font-size: 18px; font-weight: normal; padding: 0 0 1em; text-align: center;}
.title-line::after { content: ''; /* required to display pseudo elements */ height: 1px; /* this works like a border-width */ width: 10%; /* you can use a percentage of parent or fixed px value */ background: #CCC; /* the color of border */ position: absolute; bottom: 0; /* position it at the bottom of parent */ margin: 0 auto; left: 0; right: 0; /* horizontal centering */}
<dt class="title-line">My Text Example</dt>
How to shorten the length of the border-bottom? In html/css
You can't change the actual length of the border.
You'd need to use a positioned pseudo-element.
div { width: 100px; height: 100px; background: rebeccapurple; margin: 1em auto; position: relative;}
div::after { content: ""; position: absolute; height: 10px; background: red; top: 100%; width: 50%; left: 50%; transform: translateX(-50%);}
<div></div>
Related Topics
How to Add a Tool Tip to a Span Element
Make <Body> Fill Entire Screen
CSS Property as SASS Mixin Value
Easiest Way to Extract the Urls from an HTML Page Using Sed or Awk Only
How to Prevent Line Break at Hyphens in All Browsers
Difference Between Overflow-Wrap and Word-Break
How to Keep Footer at Bottom of Screen
Bootstrap 3: Push/Pull Columns Only on Smaller Screen Sizes
How to Hide Columns in HTML Table
HTML + CSS: Ordered List Without the Period
Bootstrap: Add Margin/Padding Space Between Columns
Make Link in Table Cell Fill the Entire Row Height
Export HTML Table to Excel Using ASP.NET
Disable Spell-Checking on HTML Textfields