how to make line cross center text without span

Question

I want to draw a centered line on the back of a text. My code works on google chrome, but not on safari and IE. There are many tutorials about this, but all of them has a span surround the text. is there anyway to draw the line without span? Below is my code:

<h1>Header</h1>

h1{overflow: hidden;text-align: center;}

h1:before, h1:after {position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 2px;
content: '\a0';
background-color: #e6ebfa;}

h1:before {margin-left: -52%; text-align: right;}
h1:after {margin-left: 2%;}

K K · Accepted Answer · 2015-08-25T06:46:23.840

2

Update

Solution 1:

Demo: http://jsfiddle.net/1cy803ar/36/

CSS:

.title {
    display:block;
    margin:0;
    padding:0;
    text-align:center
}
.title h1 {
    overflow: hidden;
    text-align: center;
    position:relative;
    display:block;
    margin:0;
    padding:0;
}
.title h1:before, .title h1:after {
    content:'\a0';
    display:inline-block;
    width:100px;
    height:1px;
    background-color:red;
    line-height:0;
    margin:0 5px;
}

HTML:

<div class="title">
     <h1>Title Header</h1>
</div>

Solution 2:

Yes, Demo : http://jsfiddle.net/1cy803ar/9/

CSS:

h1 {
    overflow: hidden;
    text-align: center;
    position:relative; //You missed this.
}
h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 40%; //modified
    height: 2px;
    content:'\a0';
    background-color: #e6ebfa;
}
h1:before {
    left:0;
}
h1:after {
    right: 0;
}

edited Aug 25 '15 at 06:46

answered Nov 20 '14 at 05:58

K K

17,794
4
30
39

Thank you, KK. But it only has a right line on IE and Safari. – user3390591 Nov 20 '14 at 23:00
I forgot to mention, my code is working on firefox chrome, but not working on ie and safari. On ie and safari, there is only right line. – user3390591 Nov 21 '14 at 04:37
You need to give left and right values for :before and :after pseudo elements respectively. You can also refer this http://stackoverflow.com/questions/23584120/line-separator-under-text-and-transparent-background – K K Nov 21 '14 at 04:42
1

Hi KK: Thanks again. I have tried right and left. But the thing is the title is not fixed width, I might use it on other longer titles. Like this one: http://jsfiddle.net/lukelee/1cy803ar/27/ I am thinking is there anyway to overflow hidden the before and after? – user3390591 Nov 21 '14 at 04:53
Never mind, I used jquery to add a span wrap inside head. Thank you for your help. – user3390591 Nov 25 '14 at 02:14
@KK unfortunately the line overflowing when text increase – Mo. Aug 25 '15 at 06:18
@MuhammedAthimannil Let me try it – K K Aug 25 '15 at 06:29
@MuhammedAthimannil Chek the updated answer – K K Aug 25 '15 at 06:46
@KK still overflowing the text http://jsfiddle.net/1cy803ar/37/ – Mo. Aug 25 '15 at 06:48
@MuhammedAthimannil You haven't used the latest demo. Please use the updated answer. The first solution which I posted: http://jsfiddle.net/1cy803ar/36/ – K K Aug 25 '15 at 06:52
1

@KK Yup, it works now http://jsfiddle.net/1cy803ar/39/ thanks dude – Mo. Aug 25 '15 at 06:56

how to make line cross center text without span

1 Answers1