Line before and after title over image
You can make a line on both sides of the title with 2 pseudo elements and borders:
- This works over a transparent background (lines and title have transparent backgrounds).
- The line length will adapt to the title width so they alway start and end at the same position regardless to title length.
- The title can span on several lines while the left and right lines stay verticaly centered (Note that you need to wrap the title in a
<span>
tag for this to work. See demo)
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300); body { background-image: url(http://i.imgur.com/EzOh4DX.jpg); background-repeat: no-repeat; background-size: 100% auto; font-family: 'Open Sans', sans-serif;}h1 { width: 70%; margin: .7em auto; overflow: hidden; text-align: center; font-weight:300; color: #fff;}h1:before, h1:after { content: ""; display: inline-block; width: 50%; margin: 0 .5em 0 -55%; vertical-align: middle; border-bottom: 1px solid;}h1:after { margin: 0 -55% 0 .5em;}span { display: inline-block; vertical-align: middle;}
<h1>Today</h1><h1>Today news</h1><h1><span>Today<br/>news</span></h1>
CSS add line before and after the image
You can do this with Flexbox
. You can vertically center img and lines with align-items: center
also with flex: 1
:before
and :after
will take remaining width.
a { display: flex; align-items: center;}a:before,a:after { flex: 1; content: ''; height: 1px; background: black;}
<a href=""> <img src="http://placehold.it/100x100"></a>
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>
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 to create both-sided dotted line around a title?
This solution is adapted from this answer : Line separator under text and transparent background
The dotted line will stay verticaly centered according to the height of the text (font-size, multiple lines) and adapt to the width of the text :
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);body{ background-image: url(http://fr.playstation.com/media/5ZfqPjVF/BigSkyInfinity_Hero_EN.JPG); background-repeat:no-repeat; background-size:100% auto; font-family: 'Open Sans', sans-serif;}
.divider{ color:#ccc; width:70%; margin:20px auto; overflow:hidden; text-align:center; line-height:1.2em;}
.divider:before, .divider:after{ content:""; vertical-align:middle; display:inline-block; width:50%; border-bottom:2px dotted #ccc; margin:0 2% 0 -55%;}.divider:after{ margin:0 -55% 0 2%;}h1:nth-child(2){ font-size:3em;}span{ display:inline-block; vertical-align:middle; }
<h1 class="divider">Today</h1><h1 class="divider">Today News</h1><h1 class="divider"><span>Today News<br/>More text<span></h1>
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>
use :before and :after elements to fill remaining space of text element
you can use display:flex;
without span tag but, pseudo class, since this is only about design.
h2 {
display: flex;
}
h2:before,
h2:after {
content: '';
flex: 1;
margin: auto 1em;
height: 0;
border-top: solid red 1px;
}
<h2>Small title</h2>
<h2>This is a very long title</h2>
Related Topics
What Is the Way to Add Horizontal Scroll on Material-Ui Table With Many Columns
How to Make a Div Expand Vertically to Wrap the Content Within It
Overriding the Encapsulated CSS of External Component
Show Child Div Within Hidden Parent Div
What Does the "+" (Plus Sign) CSS Selector Mean
On a CSS Hover Event, How to Change Another Div'S Styling
How to Override Inline Styles With External Css
Reset CSS Display Property to Default Value
Order Columns Through Bootstrap4
Family Tree With Pure HTML and CSS (Or With Minimal Js)
Override Body Style for Content in an Iframe
How to Add Fonts to Create-React-App Based Projects
How to Add a Scrollbar to an Html5 Table
Why Is a Flex Item Limited to Parent Size
How to Have Multiple Background Images Using Css
Svg Data Image Not Working as a Background-Image in a Pseudo Element