Line between the text in CSS

Question

I can't get the result a paragraph in html and css. I'd like to set 2 lines (or 2 borders) between a text, like this:

---- TEXT ----

How can I do this using CSS or something like that?

Two lines _between_ the text? Your example has lines before and after the text. — Kristoffer Jälén, Jul 07 '14 at 18:48
Yes, I'd like to do this using somenthing like
. A big
with a text in the middle. — Vinicius Lima, Jul 07 '14 at 18:52

score 4 · Answer 1 · answered Jul 07 '14 at 18:57

4

You can try with :before and :after pseudo elements like this:

html

<p>Test</p>

css

p:before{
    content:"----";
}

p:after{
    content:"----";
}

fiddle

answered Jul 07 '14 at 18:57

Alex Char

32,879
9
49
70

score 2 · Answer 2 · answered Jul 07 '14 at 18:56

Here's a quick and easy way, so long as your background is a solid color.

HTML:

<p class="myCopy">
    <span>My Text goes here</span>
</p>

CSS:

.myCopy {
    display: block;
    height: 10px;
    border-bottom: solid 1px #000;
    text-align: center;
}

.myCopy span {
    display: inline-block;
    background-color: #fff;
    padding: 0 10px;
}

Adjust the height value of .myCopy to move the line up and down. Change the background color of the inner span to match the primary background color.

EDIT: here's a fiddle - FIDDLE!!!

score 1 · Answer 3 · edited May 23 '17 at 10:30

From the top answer of CSS Title with Horizontal Line on either side

How about this:

<h1 class='strikearound'>Lined Title</h1>

h1.strikearound {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1.strikearound:before, h1.strikearound:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: grey;
}
h1.strikearound:before {
    margin-left: -50%;
    text-align: right;
}

Demo in fiddle

What's nice is it doesn't rely on any particular background color

Screenshot:

screenshot

score 0 · Answer 4 · answered Jul 07 '14 at 18:48

0

You can use a paragraph <p> or a line-break <br> tag to separate text. Additionally, a horizontal rule <hr> tag will create a horizontal line to separate text.

answered Jul 07 '14 at 18:48

rageandqq

2,221
18
24

1

You don't appear to have understood the question. – EkoostikMartin Jul 07 '14 at 18:50

Kinga · Answer 5 · 2014-07-07T19:49:45.750

You can use position: relative to move children on bottom border for solid color.

Html:

<p class="myCopy">
    <span>My Text goes here</span>
</p>

Css:

.myCopy {
    display: block;
    border-bottom: solid 1px #000;
    text-align: center;
}

.myCopy span {
    position:relative;
    bottom: -10px;
    display: inline-block;
    background-color: #fff;
    padding: 0 10px;
}

Styled version: http://jsfiddle.net/UnG4T/1/

Or you can use 100% width :after and :before with negative margin for other bg

.myCopy {
    position: relative;
    display: block;
    text-align: center;
}

.myCopy::before, .myCopy::after{
    content: "";
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 100%;
    border-bottom: solid 1px #000;
}

.myCopy::before{
    margin-left: -100%;
}

.myCopy span {
    display: inline-block;
    padding: 0 10px;
}

Styled version: http://jsfiddle.net/UnG4T/3/

Line between the text in CSS

5 Answers5

Demo in fiddle