Short horizontal lines on boths sides of text

Question

I came across a solution here but it's not quite what I need for 2 reasons:

I don't know how to make the lines much shorter in width.
That solution defines H2, and I have already defined h2 in a current css I have on the website. I would prefer a unique css class as the definition so it doesn't clash. Thr following image shows what I'm trying to achieve. Basically, a h2 text in italic + 2 shorter horizontal lines on both sides, centered, like this Lines with text in the middle

I will appreciate any help at all. I will be using the code in Wordpress Thank you.

you can use :before and :after css property to achieve this – Super User Feb 16 '16 at 10:43 — Super User, Feb 16 '16 at 10:43
It doesn't HAVE to be `H2`, it can be anything you choose – StudioTime Feb 16 '16 at 10:45 — StudioTime, Feb 16 '16 at 10:45

Nenad Vracar · Accepted Answer · 2016-02-16T13:52:20.147

1

This is example with unique class line so you can apply that class to any element and you will have lines on both side. You can also change width of lines on line:after and line:before

.parent {
  text-align: center;
}

.line {
  font-size: 30px;
  position: relative;
  display: inline-block;
  margin: 0;
}

.line:after, .line:before {
  content: '';
  width: 50px;
  position: absolute;
  top: 50%;
  height: 1px;
  background: black;
}

.line:before {
  left: 0;
  transform: translate(-120%, -50%);
}

.line:after {
  right: 0;
  transform: translate(120%, -50%);
}

<div class="parent">
  <p class="line">Lorem ipsum</p>
</div>

edited Feb 16 '16 at 13:52

answered Feb 16 '16 at 11:06

Nenad Vracar

118,580
15
151
176

thanks it worked but for some reason the code made every text on my homepage become centered. I suspect it has something to do with 'body' in your code. I'd be grateful if you could come up with something that won't affect everything else on the homepage, just this particular text alone is required centered with the 2 lines. Thanks a bunch. – Paola Feb 16 '16 at 12:35
Just use some other parent div for `text-align: center` instead of body, i used body just for demo purpose. – Nenad Vracar Feb 16 '16 at 12:37
Thanks Nenad, but I'm a novice :) Just a girl trying to learn some css for her site. I tried a few things but it didn't work, removing 'body' makes it align left. If you could repaste the code (just the top part/first row so I could see how to place the "text-align: center" which you mentioned. Many thanks again and sorry for the trouble. – Paola Feb 16 '16 at 13:56
@Paola I updated my answer take a look. – Nenad Vracar Feb 16 '16 at 13:57
It worked beautifully, you're a life saver. Thank you so much! :) – Paola Feb 16 '16 at 14:38

score -1 · Answer 2 · answered Feb 16 '16 at 10:52

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">

<style>
    .line-center{
        margin:0;padding:0 10px;
        background:#fff;
        display:inline-block;
    }
    div{
        text-align:center;
        position:relative;
        z-index:2;
        width: 100px;

    }
    div:after{
        content:"";
        position:absolute;
        width: 100px;
        top:50%;
        left:0;
        right:0;
        border-top:solid 1px black;
        z-index:-1;
    }
</style>

</head>
<body>
<div>
    <span class="line-center">Test</span>
</div>



</body>

Short horizontal lines on boths sides of text

2 Answers2