Create line after text with css
You could achieve this with an extra <span>
:
h2 {
font-size: 1rem;
position: relative;
}
h2 span {
background-color: white;
padding-right: 10px;
}
h2:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0.5em;
border-top: 1px solid black;
z-index: -1;
}
<h2><span>Featured products</span></h2>
<h2><span>Here is a very long h2, and as you can see the line get too wide</span></h2>
CSS technique for a horizontal line with words in the middle
This is roughly how I'd do it: the line is created by setting a border-bottom
on the containing h2
then giving the h2
a smaller line-height
. The text is then put in a nested span
with a non-transparent background.
h2 {
width: 100%;
text-align: center;
border-bottom: 1px solid #000;
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background:#fff;
padding:0 10px;
}
<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>
How can I create a line after my text to the width of the container?
THIS METHOD WILL WORK WITH TEXTURED BACKGROUNDS (background images):
You can try using this method instead, if your <h2>
is on top of a background image.
HTML:
<h2 class="line-title"><span>This is my title</span><hr /></h2>
CSS:
.line-title {
font-size: 20px;
margin-bottom: 10px;
padding-top: 1px; /* Allows for hr margin to start at top of h2 */
}
/* clearfix for floats */
.line-title:after {
content: "";
display: table;
clear: both;
}
.line-title span {
padding-right: 10px;
float: left;
}
.line-title hr {
border:1px solid #DDD;
border-width: 1px 0 0 0;
margin-top: 11px;
}
See the working example here: http://jsfiddle.net/yYBDD/1/
How it Works:
the
<h2>
tag acts as a container for a floated element.the
<span>
is floated left, causing the<hr />
to collapse to the left and fill the right space.the
<hr />
acts as the line, and fills up the remaining space to the right.
Draw line after a title with CSS
Based on this answer :
h1{
overflow:hidden;
}
h1:after{
content:'';
display:inline-block;
width:100%; height:100%;
margin-right:-100%;
border-bottom:1px solid #000;
}
<h1>Title</h1>
<h1>Longer Title</h1>
How to display a horizontal line before and after a heading in css
There's obviously many ways you can achieve what you're after. But how about something like this?
h1 {
font-size: 4rem;
}
h1::before,
h1::after {
display: inline-block;
content: "";
border-top: .3rem solid black;
width: 4rem;
margin: 0 1rem;
transform: translateY(-1rem);
}
<h1>Heading</h1>
Line before and after text not responsive
A simple option is to use a flexbox for section-header
- then you can:
- set the space between the h2 and the lines using a
margin
set to theh2
- set the
width
of the pseudo elements as 100% - being a flex item, it will adapt to the space available
See demo below:
.section-header {
position: relative;
display: flex; /* sets a flex container */
align-items: center; /* aligns vertically */
}
.section-header h2 {
border: 2px solid rgba(0, 0, 0, 0.1);
padding: 0.3em 0.8em;
display: inline-block;
margin: 0 1em; /* space between h2 and line if needed */
}
.section-header::before,
.section-header::after {
border-top: 1px solid black;
display: block;
height: 1px;
content: " ";
width: 100%; /* full-width ;)*/
top: 1.2em;
opacity: 0.1;
}
.text-center {
text-align: center !important;
}
<div class="section-header text-center">
<h2>Testing</h2>
</div>
How to line-break from css, without using br / ?
Impossible with the same HTML structure, you must have something to distinguish between Hello
and How are you
.
I suggest using span
s that you will then display as blocks (just like a <div>
actually).
p span {
display: block;
}
<p><span>hello</span><span>How are you</span></p>
CSS horizontal line on one side of text
With your current HTML structure you can use Flexbox
and :after
, :before
pseudo elements to do this.
h2 {
display: flex;
align-items: center;
justify-content: center;
}
h2 span {
background: #fff;
margin: 0 15px;
}
h2:before,
h2:after {
background: black;
height: 2px;
flex: 1;
content: '';
}
h2.left:after {
background: none;
}
h2.right:before {
background: none;
}
<h2 class="left"><span>THIS IS A TEST</span></h2>
<h2 class="right"><span>LOREM</span></h2>
<p>this is some content</p>
Use before & after Pseudo-element to make a line
You don't need both :before
and :after
, either of the 2 will be enough and as you've been told, you don't need an image. See the approach below.
#header {
width: 100%;
height: 50px;
margin: 50px 0;
text-align: center;
font-size: 28px;
position: relative;
background-color: #57585C;
}
#header:after {
content: '';
width: 100%;
border-bottom: solid 1px #fff;
position: absolute;
left: 0;
top: 50%;
z-index: 1;
}
h3 {
background-color: #57585C; /* Same as the parents Background */
width: auto;
display: inline-block;
z-index: 3;
padding: 0 20px 0 20px;
color: white;
position: relative;
font-family: calibri;
font-weight: lighter;
margin: 0;
}
<div id="header">
<h3>Last Projects</h3>
</div>
Related Topics
Unicode Character for "X" Cancel/Close
Find Element That Is Causing the Showing of Horizontal Scrollbar in Google Chrome
Sass - Converting Hex to Rgba for Background Opacity
Insert Image After Each List Item
How to Add Badge on Top of Font Awesome Symbol
Which Letter of the English Alphabet Takes Up Most Pixels
Font-Style: Italic VS Oblique in CSS
CSS Keyframe Animation CPU Usage Is High, Should It Be This Way
How a CSS Pixel Size Is Calculated
Css-Only Acrylic Material from Fluent Design System
Differencebetween the Selectors ".Class.Class" and ".Class .Class"
Bootstrap 4, How to Center-Align a Button
Bootstrap 3 Arrow on Dropdown Menu
Twitter Bootstrap Scrollable Modal
Set the Width of Select2 Input (Through Angular-Ui Directive)
CSS Flex, How to Display One Item on First Line and Two on the Next Line