text between lines in css

Question

in CSS, how can i do something like:

---Item---

with the dash connected like a line?

i thought of :

border-bottom: 3px solid #000;

but then i can't move the line upward plus the line would be behind the text, not surrounding the text

my HTML

<ul>
    <li class="sub-menu-item" ><a href="#">FACULTY&STAFF</a></li>
</ul>

(if possible, i would like to avoid touching the HTML)

is all the above possible via css or should i just use an image after all?

i'm aiming for ie8 and above(and all the new browsers of course)

Im not sure because I haven't tried it but could you possibly use a strikethrough on the surrounding characters. You would however need to modify the html, which I know is something you weren't keen on doing. — Jon Taylor, Jul 05 '12 at 15:16
How many dashes do you want on the left of the word, and how many on the right? If you need exactly 3 on each side, then consider this: http://jsfiddle.net/bbjXP/ — Šime Vidas, Jul 05 '12 at 15:19
duplicates: http://stackoverflow.com/questions/11142748/how-to-position-text-over-border , http://stackoverflow.com/questions/11301380/how-to-have-a-horizontal-line-at-the-middle-of-a-html-heading-with-css/11301597#11301597 — kapa, Jul 05 '12 at 15:44

score 5 · Accepted Answer · edited May 23 '17 at 12:07

5

Inject an — before and after your content using the CSS :before and :after selectors. You'll need to use the escaped unicode, as discussed here:

li.sub-menu-item:before,  li.sub-menu-item:after {
    content: "\2014"
}

See JSFiddle. For a shorter line you could use an ndash.

edited May 23 '17 at 12:07

Community

1
1

answered Jul 05 '12 at 15:24

Roddy of the Frozen Peas

14,380
9
49
99

I like your answer better than mine. Much simpler and doesn't require background color on the text. +1 – KP. Jul 05 '12 at 15:41

KP. · Answer 2 · 2012-07-05T15:31:49.707

3

Here's a start:

.sub-menu-item
{
    border-bottom:1px solid black;
    height:0.6em;
    width:200px;
    text-align:center;
    margin-bottom:1em;

}
.sub-menu-item > a
{
    text-decoration:none;
    background:white;
}

http://jsfiddle.net/NpP5F/3/ (updated to work with multiple items)

Tested to work in Firefox, IE and Chrome. Now keep in mind this works in isolation in a fiddle. Would probably require some tweaking to get it to work within other html elements and styles, etc. Proof of concept anyway. It "can" be done.

edited Jul 05 '12 at 15:31

answered Jul 05 '12 at 15:23

KP.

13,218
3
40
60

1

It breaks when you add more than one li item. – menislici Jul 05 '12 at 15:24
@menislici thanks for noting this. Fixed by adding margins. – KP. Jul 05 '12 at 15:27
what does ".sub-menu-item > a" do? i'm still kinda new to CSS... – tom91136 Jul 05 '12 at 15:29
I downvoted because this is not a solution that should be used. We don't need a proof of concept because we all know it can be done :). – kapa Jul 05 '12 at 15:30
the background:white; makes it look all terrible ... – tom91136 Jul 05 '12 at 15:33
@Tom91136 I'm not saying it's pretty. I'm saying it can be done through CSS only, which is what the OP asked for. OP's words exactly: "is all the above possible via css". The answer? Yes. – KP. Jul 05 '12 at 15:35
Also, the magic `height: 10px` does not make it really useful... Try it with a different font size. – kapa Jul 05 '12 at 15:36
@bažmegakapa already addressed it 10 mins ago. uses `em`. I'd be happy to see your better solution btw. Like I said this isn't a pretty solution, but it works. If you've got a better one by all means let us see it, as @RoddyOfTheFrozenPea did below. Probably a better alternative to this. – KP. Jul 05 '12 at 15:38
@KP I created one, did not find it pretty enough, so abandoned it, because I don't want to spend more time on this now. I only show stuff publicly if I'm satisfied with its quality. Btw, the font size problem is fixed for sure as I see it now. – kapa Jul 05 '12 at 15:42
1

@Tom91136 `.sub-menu-item > a` just references the `` tag that is a direct child (directly nested under) the class `.sub-menu-item`. It basically just ensures only the hyperlinks found directly in the list items will be affected by the styles. Hope this helps. In general, the `>` just means direct child. Without it in this example, `.sub-menu-item a` would reference any `a` tag that is somewhere under `.sub-menu-item`. – KP. Jul 05 '12 at 15:54

score 2 · Answer 3 · answered Apr 11 '13 at 14:29

You can create a div with border-top and border-bottom, line-height: 0 with a span inside it that has a defined background color:

<div class="test">
   <span>BLA BLA BLA </span>
</div>

And the CSS:

.test {
border-bottom: 1px solid #D7D7D7;
border-top: 1px solid #A1A1A1;
line-height: 0;
text-align: center; }

.test span { 
background-color: #BABABA;
padding: 0 10px; }

score 1 · Answer 4 · answered Jul 05 '12 at 15:16

1

In theory you could use the <hr/> and then just set the length of it and force it to display inline. Or use some special unicode characters if your encoding supports it.

answered Jul 05 '12 at 15:16

John Mitchell

9,653
9
57
91

display inline? like display:inline-block ? why? – tom91136 Jul 05 '12 at 15:17

score 0 · Answer 5 · edited Jul 05 '12 at 15:32

0

Try this. :) It uses an image, which is a plus because it allows you to style your dashes however you want, and doesn't deal with any freaky margins or anything which may mess up the rest of your layout.

li.sub-menu-item
{
    background-image: url('http://i.imgur.com/JIa6C.png'); /* Just a transparent PNG with a line in the middle */
}

li.sub-menu-item a
{
    background-color: #FFF;
    padding: 0 10px;
    margin-left: 200px /* So you can see the left side of the line too */
}

http://jsfiddle.net/wAb8C

edited Jul 05 '12 at 15:32

kapa

77,694
21
158
175

answered Jul 05 '12 at 15:27

Nathanael

6,893
5
33
54

This is not really an answer because the OP says he knows how to solve it with an image. – kapa Jul 05 '12 at 15:37

score -1 · Answer 6 · answered Jul 05 '12 at 15:24

-1

Without changing the code:

ul li{
position: relative;
border-bottom: 1px solid #000;
}

ul li a{

position: relative;
background: #fff;
left: 0;
bottom: -10px;
margin-left: 10px;
color: orange;
text-decoration: none;
}

Example here

answered Jul 05 '12 at 15:24

menislici

1,149
5
18
35

And `-10px` is the magic number? -1 from me. – kapa Jul 05 '12 at 15:26
1

Why did you choose -10px? What if the font is bigger? – kapa Jul 05 '12 at 15:31
Well, I guess @Tom91136 is not just going to copy & paste it without suiting to it's own needs. Furthermore he only stated he wanted to know if it was possible doing such thing. On top of that, as you can see, the text has got a generic color and font, so obviously it needs repairs, but since he didn't provide a link for us to give it a proper styling, I assume he's going to do it when he goes live. – menislici Jul 05 '12 at 15:37
Common argument of the lazy people (including me sometimes, but luckily there is always someone warning me). – kapa Jul 05 '12 at 15:39
You know what, you're right. But I don't see your answer to the problem anywhere. 'Common argument of the lazy people' -- fortunately there's someone warning you indeed! – menislici Jul 05 '12 at 15:42
@menislice Don't worry, I did not waste time, collected some duplicates that have some nice solutions. – kapa Jul 05 '12 at 15:45
What baz is trying to say is that the -10px pretty much locks you in to the given font size. If the user is using a larger font, it work look odd. A solution might be to use em as units so it'll adapt to the font-size the user is using at the time. – Roddy of the Frozen Peas Jul 05 '12 at 15:47

text between lines in css

6 Answers6

Linked

Related