Create Line After Text with CSS

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:

  1. the <h2> tag acts as a container for a floated element.

  2. the <span> is floated left, causing the <hr /> to collapse to the left and fill the right space.

  3. 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 the h2
  • 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 spans 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



Leave a reply



Submit