Hi I have done a speech bubble but I want to get the background image to come into the arrow as well. I did find some examples as well but editing them to fit my needs is confusing because I cant position the arrow to the place I want it to be in the end.
.bubble {
position: relative;
width: 227px;
height: 310px;
background-color:white !important;
background: url(../images/thepartypeople/assets/main-bg.png) repeat 0 0;
}
.bubble:after {
content: "";
position: absolute;
top: 128px;
left: -15px;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #000;
display: block;
width: 0;
z-index: 1;
}
This is my code that I have for my speech bubble.
Any help would be appriciated
Thanks alot.
Here is the question answered elsewhere
Creating a transparent arrow above image in CSS3
But, I'll give you the HTML and CSS for your specific answer. I changed your HTML a little bit by the way.
<div class="bubble">
<img class="test" src="http://placekitten.com/241/310" alt="kitten" />
</div>
You can keep it with just the div .bubble and have background: url('http://placekitten.com/241/310'); but the image would have to be exactly the height and width of the div.
.bubble {
position:relative;
width:241px;
height: 310px;
}
.bubble:before, .bubble:after {
content:'';
position:absolute;
width:0;
border-left:15px solid white;
left:0;
}
.bubble:before {
top:0;
height:128px;
border-bottom:15px solid transparent;
}
.bubble:after {
top:143px;
bottom:0;
border-top:15px solid transparent;
}
.test {
display:block;
width:100%;
}
Here is a fiddle http://jsfiddle.net/WUXQd/2/ the fiddle has comments in it explaining a bit how it works.
EDIT: By the way this creates a mask around the image and two reverse triangles to make it look like there is a transparent triangle.
is this similar to what you wanted?
.bubble {
position: relative;
width: 250px;
height: 120px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: url(border.jpg) repeat 0 0;
}
.bubble:after {
content: "";
position: absolute;
top: 45px;
left: -15px;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
border-image: url(border.jpg);
}
EDIT: This link can help you: http://www.sitepoint.com/pure-css3-speech-bubbles/
Related
I'm quite new to coding so it's probably something really easy that I'm trying to do but can't get it to work.
I've made some arrows with css borders. Now I want to do a rectangle that is semi transparent behind each arrow.
Something like this
But with rectangles instead of the circle.
This is the code I've got so far :
<div id="arrow"></div>
#arrow {
display: block;
border-right: 2px solid; border-bottom: 2px solid;
width: 30px; height: 30px;
transform: rotate(-45deg);
border-color:black;
margin:auto;
display:block;
position:relative;
}
super easy way:
HTML:
<div id="arrowBox">
<div id="arrow"></div>
</div>
CSS:
#arrow {
display: block;
border-right: 2px solid; border-bottom: 2px solid;
width: 30px; height: 30px;
transform: rotate(-45deg);
border-color:black;
margin:auto;
display:block;
position:relative;
}
#arrowBox{
background:rgba(0,0,0,0.5);
display:inline-block;
padding:10px 15px 10px 0;
}
adjust padding to change the size of the box.
Instead of using the div as your arrow, try using the div as your rectangle (or circle if desired). You'll need background-color: rgba(0,0,0,0.4) or similar to get the "translucent black" effect.
Once that's done, put your arrow styles in the ::before pseudo-element. Use positioning to get it in the right place, but it should be pretty easy to get the arrow to appear. Don't forget content:'' to make the pseudo-element appear.
set css property to your rectangle div or any shape as,
{ opacity: 0.5;}
You can user pseudo-elements to add the box with no additional markup. As already suggested, use rgba to define the background color.
I made a fiddle with an example showing the result, with 4 arrows in different directions on different background colors: https://jsfiddle.net/7f6tg9s3/4/
Here is the arrows part:
.arrow {
display: inline-block;
position:relative;
width: 30px;
height: 30px;
}
.arrow::before {
content: ' ';
display: block;
background-color: rgba(0, 0, 0, 0.3);
position: relative;
width: 30px;
height: 30px;
margin-right: -30px;
margin-bottom: -30px;
z-index: 1;
}
.arrow::after {
content: ' ';
display: block;
box-sizing: border-box;
position: relative;
border-right: 2px solid;
border-bottom: 2px solid;
width: calc(25px / 1.41421);
height: calc(25px / 1.41421);
border-color: #fff;
z-index: 2;
}
.arrow.right::after {
transform: rotate(-45deg);
top: 6px;
left: 2px;
}
.arrow.left::after {
transform: rotate(135deg);
top: 6px;
left: 12px;
}
.arrow.up::after {
transform: rotate(-135deg);
top: 12px;
left: 7px;
}
.arrow.down::after {
transform: rotate(45deg);
top: 2px;
left: 7px;
}
I can't find what I need. I have this code
<hgroup id="subheader">
<h1>lorem ipsum</h1>
<h2>ipsum lorem</h2>
read More
</hgroup>
I want the link to have a border with a down triangle at the bottom. But it has to be transparent, because it goes in front of an image. Is that possible?
The shape given in question is a bit complex to achieve with full transparency because of the area cut by the arrow having to be transparent too. Because of this, the techniques that are generally used for creating such tool-tip like shapes cannot be used as-is here. However, there is a still a way to achieve it using CSS and it is as follows:
Use the parent hgroup for the shape with borders on top, left and right and add border-radius. Don't add any border to the bottom because then cutting the space for the arrow would be tough.
Use two pseudo elements (:before and :after) which have the same height as the parent but lesser width such that they produce a tiny gap when positioned absolutely with respect to parent. Add border-bottom alone to these pseudo-elements.
Add a pseudo-element for the arrow on the arrow-down element (a) and create the arrow using rotate(45deg) transforms instead of using the border trick. The transform method is very helpful for creating transparent arrows. Position this arrow again absolutely with respect to the parent.
As we are dealing with transforms, triangle shapes etc the position values need to be calculated based on Math theorems.
* {
box-sizing: border-box;
}
.container {
height: 300px;
width: 500px;
background: url(http://lorempixel.com/500/300/nature/2);
padding: 10px;
}
#subheader {
position: relative;
width: 400px;
height: auto;
border: 1px solid black;
border-bottom: none;
border-radius: 12px;
padding: 10px;
}
.arrow-down{
display: inline-block;
}
.arrow-down:after {
position: absolute;
content: '';
bottom: -10px; /* half the height of the element */
left: 50px; /* some aribitrary position */
height: 20px;
width: 20px;
transform: rotate(45deg);
transform-origin: 50% 50%; /* rotate around center which is at 60px from left */
border-right: 1px solid black;
border-bottom: 1px solid black;
}
#subheader:after {
position: absolute;
content: '';
left: 74px; /* center point of arrow + 1/2 of hypotenuse */
height: 100%;
width: calc(100% - 74px); /* 100% - value of left */
bottom: 0px;
border-bottom: 1px solid black;
border-bottom-right-radius: inherit; /* same border-radius as parent */
}
#subheader:before {
position: absolute;
content: '';
height: 100%;
width: 46px; /* center point of arrow - 1/2 of hypotenuse */
left: 0px;
bottom: 0px;
border-bottom: 1px solid black;
border-bottom-left-radius: inherit; /* same border-radius as parent */
}
<div class='container'>
<hgroup id="subheader">
<h1>lorem ipsum</h1>
<h2>ipsum lorem</h2>
Read More
</hgroup>
</div>
Here is a working version of what you're after.
HTML
<div style="display:none" class="tri-down">Your Content will go into this fancy tri-down</div>
CSS --- I ADDED a background img to show that its transparent as you said that you were going to be having an image behind it.
body {
background: #333 url("http://a2.files.readwrite.com/image/upload/c_fit,cs_srgb,dpr_1.0,q_80,w_620/MTIyMzI3NDY5NDAyMzg1Njg5.jpg") fixed;
}
.tri-down {
/* Styling block element, not required */
position: relative;
margin-bottom: 2em;
padding: 1em;
width: 75%;
border: 1px solid #999;
background: #f3f3f3;
border-radius:5px;
opacity: 0.5;
/*you may want to set the z-index level of your tri-down box.
z-index: 100;
*/
}
/* Required for Down Triangle */
.tri-down:before, .tri-down:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-bottom: 0;
}
/* Stroke */
.tri-down:before {
bottom: -16px;
left: 21px;
/* If 1px darken stroke slightly */
border-top-color: #777;
border-width: 16px;
}
/* Fill */
.tri-down:after {
bottom: -15px;
left: 22px;
border-top-color: #f3f3f3;
border-width: 15px;
}
JSFIDDLE HERE
http://jsfiddle.net/LZoesch/dk43s2qz/
You will want to hide the DIV that is going to house your content. I added it to the above HTML code.
style="display:none"
Then you want to call the link on click and toggle the div class tri-down on/off
<script type="text/javascript">
$(function(){
$('#').click(function(){
$('#').toggle();
$('#').toggle();
});
});
</script>
Here is your orignal code.
<hgroup id="subheader">
<h1>lorem ipsum</h1>
<h2>ipsum lorem</h2>
read More
</hgroup>
If you dont want to set the opacity if your div, you can also try this below.
body {
background: url(http://a2.files.readwrite.com/image/upload/c_fit,cs_srgb,dpr_1.0,q_80,w_620/MTIyMzI3NDY5NDAyMzg1Njg5.jpg);
font-family: sans-serif;
text-align: center;
}
body > div {
color: #000;
margin: 50px;
padding: 15px;
position: relative;
}
.tri-down {
border: 5px solid #000;
content: "";
position: absolute;
}
you can try this one:
.tri-down {
/* Styling block element, not required */
position: relative;
margin-bottom: 2em;
padding: 1em;
border: 1px solid #999;
background: #f3f3f3;
border-radius:5px;
}
/* Required for Down Triangle */
.tri-down:before, .tri-down:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-bottom: 0;
}
/* Stroke */
.tri-down:before {
bottom: -16px;
left: 21px;
/* If 1px darken stroke slightly */
border-top-color: #777;
border-width: 16px;
}
/* Fill */
.tri-down:after {
bottom: -15px;
left: 22px;
border-top-color: #f3f3f3;
border-width: 15px;
}
DEMO
You may need to overlay two images and absolutely position them. Like something along the lines of:
body{
padding:2em;
}
#subheader h1{
font-size:1.5em;
margin-top:0;
}
#subheader h2{font-size:1.2em;}
#subheader
{
position: relative;
max-width:300px;
min-height:1.5em;
padding: 20px;
background: #FFFFFF;
border: #dedede solid 2px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
#subheader:after
{
content: "";
position: absolute;
bottom: -19px;
height:13px;
widht:12px;
left: 10%;
border-style: solid;
border-width: 20px 13px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}
#subheader:before
{
content: "";
position: absolute;
bottom: -22.5px;
left: calc(10.5% - 3px) ;
border-style: solid;
border-width: 23px 15px 0px;
border-color: #dedede transparent;
display: block;
width: 0;
z-index: 0;}
Like in this pen
I need a weird shaped div and I've read around the web for shaping divs but I haven't found what I need :
Please note: It can't be just a border, as there is supposed to be text inside it.
You can use skewX() and a pseudo element to make a your shape responsive :
DEMO
HTML :
<div>TEST</div>
CSS :
div{
line-height:50px;
color:#fff;
text-align:center;
background:#344769;
width:20%;
position:relative;
}
div:after{
content:'';
position:absolute;
width:100%;
height:100%;
left:0;
background:#344769;
z-index:-1;
-ms-transform-origin: 0 100%;
-webkit-transform-origin:0 100%;
transform-origin: 0 100% ;
-ms-transform: skewX(-30deg);
-webkit-transform: skewX(-30deg);
transform: skewX(-30deg) ;
}
If you want to have a really custom shape, you may have a better try with SVG shapes. It allows you to draw polygons, and is used, for example, to display maps on some websites.
As for the illustration you added after editing your answer, you may want to play simply with triangles by separating your shape into the rectangle with text and a triangle on the right.
Example (see also on JsFiddle):
HTML:
<div class="shape">
<span class="text">Test</span>
<span class="triangle"></span>
</div>
CSS:
.shape {
height: 40px;
line-height: 40px;
overflow: hidden;
}
.text {
background: navy;
color: white;
float: left;
padding-left: 20px;
text-align: center;
width: 150px;
}
.triangle {
float: left;
height: 0;
width: 0;
margin-top: -40px;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 20px solid navy;
}
you can achieve this effect by using linear-gradient.
Have a look at the DEMO First.
div{
width: 200px;
height: 50px;
line-height: 50px;
font-size: 2em;
color:#ffffff;
background: linear-gradient(-250deg, #333 0%, #333 90%, transparent 90%, transparent 100%);
text-align:center;
}
You can use the :after pseudo-element in css to achieve this.
I've created a jsFiddle to demonstrate this: http://jsfiddle.net/49BRA/
CSS:
div {
display: block;
width: 200px;
height: 50px;
background-color: #CCC;
margin: 0;
padding: 0;
line-height: 1em;
position: relative;
font-size: 2em;
line-height: 50px;
text-align: center;
}
div:after {
display: inline-block;
content: "";
height: 0;
width: 0;
border: 25px solid #CCC;
border-bottom: 25px solid transparent;
border-right: 25px solid transparent;
position: absolute;
right: -50px;
}
HTML:
<div>TEST</div>
I hope this works for you.
Cheers!
Please use this code for getting the shape you want:
<span style="display: inline-block; width: 20em; height: 20em">
<span style="position: relative; display: inline-block; width: 20em; height: 20em">
<i style="position: absolute;display:inline-block;width:14.6em;height:5.4em;background-color:#007BFF;left:0em;top:0em"></i>
<i style="position: absolute;display:inline-block;width:0;height:0;line-height:0;border:2.7em solid transparent;border-left:2.7em solid #007BFF;border-top:2.7em solid #007BFF;left:14.6em;top:0em"></i>
</span>
</span>
I am trying to create a style using CSS and HTML. My desire style is something similar to this.
Most of things of that style have been done with pure CSS and HTML.
This is my CSS -
.filter-box {
float: left;
margin: 0 3% 0 2%;
width :29%;
> .main-cat {
background-color: #FFFFFF;
display: block;
margin-top: 25px;
padding: 10px;
position: relative;
> h3 {
margin: 0;
}
}
> .main-cat:after {
border-bottom: 15px solid rgba(0, 0, 0, 0);
border-left: 15px solid #FFFFFF;
border-top: 15px solid rgba(0, 0, 0, 0);
content: "";
height: 0;
margin-top: -15px;
position: absolute;
right: -14px;
top: 50%;
width: 0;
}
> .main-cat:first-child {
margin-top: 0;
}
> .sub-cat {
background: #FF9000;
margin-left: 25px;
margin-top: 5px;
padding: 8px 10px;
text-align: right;
> h4 {
margin: 0;
}
}
}
My problem is when I am trying to display a let border with a bold circle bullet on the left side of the sub category DIV.
Can any body tell me is this possible with pure CSS and HTML without using any image?
This is my code so far: JS BIN
Any comments would be greatly welcome.
Thank You.
Another possibilities would be to use background-image (gradients) and bullets of list-item , resized via font-size : DEMO
The CSS update could be :(see comment for explanation )
.filter-box {
background:linear-gradient(to right,
transparent 15px,
white 15px,
white 17px,
transparent 17px); /* draws the vertical bar aside list-items */
}
background:linear-gradient( /* draw orange background */
to right,
transparent 40px ,
#FF9000 40px),
linear-gradient(/* draw middle white bar */
to bottom,
transparent 49%,
white 48%,
white 52%,
transparent 51%
) right no-repeat;
background-size:
auto auto/* no need to resize first gradient */,
95% 100% /*reduce width of second gradient */;
display:list-item;/* lests get a round bullet if this is not a li */
color:white; /* give color to bullet */
font-size:2.2em;/* resize bullet */
list-style-position:inside;/* keep bullet inside element */
}
.filter-box > .sub-cat > h4 {
margin: 0;
font-size:0.6em;/* resize to a normal font-size from em value inherited */
display:inline-block;/* stands aside bullet */
text-align: right;/* align to right */
width:85%;/* keep min/max-width under control*/
}
Notice: no pseudo elements involved, gradient can be image for better compatibilitie and dispatch within main container , sub container and title for the background-color to increase compatibiliti with old browser.
As mentionned earlier , this menu/list deserve to be build from an HTML list.
Demo: http://jsfiddle.net/abhitalks/4LB5t/
CSS:
.sub-cat:before {
content: ' ';
border-left: 1px solid white;
display: inline-block;
width: 16px; height: 42px;
position: absolute;
left: 40px; margin: 0px; margin-top: -8px;
z-index: 10;
}
.sub-cat:after {
content: '';
display: inline-block;
width: 8px; height: 8px;
background-color: white;
border-radius: 50%;
position: absolute;
left: 36px; margin-top: -8px;
}
Update:
Demo 2: http://jsfiddle.net/abhitalks/4LB5t/1/
Just increase the height on .sub-cat:before.
Update 2:
Demo 3: http://jsfiddle.net/abhitalks/4LB5t/2/
Added your horizontal border as well. The only changes in the css are:
.sub-cat:before {
...
border-bottom: 1px solid white;
margin-top: -26px;
z-index: -1;
}
You have to tweak and tune the styles to achieve what you want. Hope that helps.
You can use the :before and :after elements in the sub-category to design the circle and left border.
Use the :before to make the circle as #megha outlined, and position it with the vertical center of the sub-cat.
Put the position of the .subcat as position: relative, so that you can define the positions of the absolutely positioned :before and :after in relation to the left edge of .subcat
Then use the :after and style it as
width: 2px;
height: 100%;
top: 0;
left: -10px
Hope this helps
Look at this pen. I have modified some of the styles in the answer to make it work. (SCSS syntax)
http://codepen.io/anon/pen/dJepq
.sub-cat {
background: #FF9000;
margin-left: 25px;
margin-top: 5px;
padding: 8px 10px;
text-align: right;
position: relative;
&:before {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ff9000;
content: "";
position: absolute;
top: 12px;
left: -20px;
}
&:after {
width: 2px;
top: -5px;
bottom: 0;
left: -16px;
content: "";
position: absolute;
background-color: #ff9000;
}
}
}
Using :after and :before pseudo element you can achieve the result.
Check the DEMO.
Here is the CSS would be required.
.sub-cat:before{
content: "";
position:absolute;
left:25px;
height: 10px;
width: 10px;
border-radius: 50%;
background:white;
margin-top: 5px;
}
.sub-cat:after{
content: "";
position:absolute;
top:55px;
left:29px;
height:21%;
border-right: 1px solid white;
}
.sub-cat h4:before{
content: " ";
position:absolute;
left:32px;
width: 10px;
height: 10px;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
border-right: 1px solid white;}
.sub-cat h4:after{
content: " ";
margin-left:10px;
margin-top:4px;
position:absolute;
border-bottom: 8px solid rgba(0, 0, 0, 0);
border-left: 8px solid #000000;
border-top: 8px solid rgba(0, 0, 0, 0);
}
A circular bullet can be created using the html :
<div id="circle"></div>
and its corresponding css
#circle
{
width:10px;
height:10px;
border-radius:5px;
background-color:white;
}
I am unable to understand what "let border" means.Hope this helps!
I have a css class for centering a heading, and adding vertically centered lines on either side. Problem is, it uses css3 background properties, and not every browser supports those. So I'd like to simplify this for cross browser compatibility, but am not sure how to do that.
Is there a simpler way to achieve this, without the css3 background (and without adding any extra elements or static heights/widths)?
demo here
.section-heading {
display: table;
white-space: nowrap;
}
.section-heading:before {
background: linear-gradient(to bottom, black, black) no-repeat left center / 95% 1px;
content: "";
display: table-cell;
width: 50%;
}
.section-heading:after {
background: linear-gradient(to bottom, black, black) no-repeat right center / 95% 1px;
content: "";
display: table-cell;
width: 50%;
}
<h2 class="section-heading">Example</h2>
You can use fieldset and legend, it's not very beautiful code but you don't need CSS3
http://jsfiddle.net/dASCv/9/
fieldset {
text-align: center;
border: none;
border-top: 1px solid black;
}
legend {
padding: 20px;
}
<fieldset>
<legend>
<h2>Example</h2>
</legend>
</fieldset>
OR this other method whit :after and :before
http://jsfiddle.net/dASCv/10/
div {
text-align: center;
}
h2:before,
h2:after {
border-top: 1px solid black;
display: block;
height: 1px;
content: " ";
width: 40%;
position: absolute;
left: 0;
top: 1.4em;
}
h2:after {
right: 0;
left: auto;
}
<div>
<h2>text TEXT</h2>
</div>
There is my best try.
I have a little isue that I have corrected in Chrome; but I really don't know even why it works.
The CCS is
.test {
display: table-row;
white-space: nowrap;
line-height: 0px;
}
.test:before,
.test:after {
border-color: transparent;
border-top: solid black 1px;
border-left: solid transparent 1px;
border-bottom: solid rgba(0,0,0,0.01) 11px;
border-right: solid transparent 1px;
content: "";
display: table-cell;
width: 50%;
}
.test:before {
border-right: solid 30px transparent;
}
.test:after {
border-left: solid 30px transparent;
}
I am using the border to display the black line, and to have it positioned in place I have reduced the height of the table to 0.
fiddle
In the fiddle, I have kept your original demo, so that you can compare side by side.
And now, the weird part. change rgba(0,0,0,0.01) in the border bottom to rgba(0,0,0,0.001), and it will break (at least in Chrome).
I really would like to understand that ...
new answer
All the above was asuming that the requirement was to have a transparent style (that is , that it was posible to set a background that could be seen thru the h1. If this is not the case, there is another posible solution, using box-shadow instead of gradient barckground:
.test {
display: table-row;
white-space: nowrap;
}
.test:before,
.test:after {
border: solid white 10px;
content: "";
display: table-cell;
width: 50%;
height: 10px;
line-height: 10px;
box-shadow: inset 0px 5px white, inset 0px 6px black;
}
.test:before {
border-right-width: 10px;
border-left-width: 1px;
}
.test:after {
border-left-width: 10px;
border-right-width: 1px;
}
new demo
1-element solution
FIDDLE
div {
display: inline-block;
background: #fff;
padding: 0 10px;
}
div:before {
content: '';
display: block;
position: absolute;
left: 0;
width: 100%;
height: 20px;
border-bottom: 1px solid #c2c2c2;
margin-top: -9px;
z-index: -1;
}
<div>A header</div>
(NB: for this solution to work, you need to set text-align:center on its parent element)
2-element solution (works over a background image)
FIDDLE
.splitHR {
text-align: center;
overflow: hidden;
}
.splitHRText {
display: inline-block;
position: relative;
padding: 0 10px;
}
.splitHRText:before,
.splitHRText:after {
content: '';
display: block;
width: 1000px;
position: absolute;
top: 0.73em;
border-top: 1px solid #c2c2c2;
}
.splitHRText:before {
right: 100%;
}
.splitHRText:after {
left: 100%;
}
<div class="splitHR">
<span class="splitHRText">A header</span>
</div>
Please add Prefix for the CSS
For Webkit browswers
-webkit-gradient
Firefox
-moz-linear-gradient
IE
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
More Details Here http://webdesignerwall.com/tutorials/cross-browser-css-gradient
Using this way also you can achieve the answer, please check this
<p style="display:block; width:100%; text-align:center;
border-bottom:1px #ccc solid; line-height:3px">
<span style="background-color:red; ">Examples</span></p>
http://jsfiddle.net/dASCv/11/
css
h2 {
border-bottom: 1px solid black;
text-align: center;
margin: 0;
padding: 0;
}
h2 span {
display: inline-block;
position: relative;
padding: 0 20px;
bottom: -15px;
background-color: white;
}
markup
<h2><span>text Textsssssssssssssssss</span></h2>
You could set the bottom for span in percentage if you set the height for h2.
you can use this code:
JsFiddle DEMO
HTML:
<h2><span>Title is here</span></h2>
CSS:
h2{
display:block;
text-align:center;
line-height:30px;
}
h2 span{
background:#fff;
padding:0 10px;
}
h2:after{
content:"";
display:block;
border-top:1px solid black;
margin-top:-15px;
}
Update:
you can use this code too: (single element)
JsFiddle
HTML:
<h2>Title is here</h2>
CSS:
h2{
display: table;
margin: 0 auto;
text-align: center;
line-height: 30px;
padding: 0 10px;
background: #FFF;
}
h2:after{
content:"";
display:block;
border-top:1px solid;
margin-top:-15px;
position:absolute;
width:100%;
left:0;
z-index:-1;
}