CSS challenge, can I do this without introducing more HTML?

Question

Imagine I have any block or inline block with text in it. Like a paragraph or li or whatever. If that tag has the "separator" class, I want it to appear as follows:

All content is centred (text-align:center; will suffice). Here's the tricky part: on either side of the centred content, a (vertically-centred) line appears.

The following image illustrates my idea:

Approximate example of what I'd like it to look like (although this is using text... "------ SEPARATE ------"

If I have to introduce more HTML, then forget about it - not interested.

I'm a long time CSS user, but I can't figure this one out... Anyone else got an idea? As much as I love it, preferably no CSS3 (for work... can't use new stuff because of compatibility)..

Example problem: <p class="separator">CENTRE ME</p>

I could do that myself, the challenge is to do it without adding any HTML at all. Thanks anyways :) — Bilal Akil, Sep 28 '12 at 23:26
And the html used to display the item is? Surely we'd need to have that before we can offer a solution that avoids adding mark-up? — enhzflep, Sep 28 '12 at 23:27
As the first sentence states, any block or inline block like a
or
http://stackoverflow.com/questions/2812770/add-centered-text-to-the-middle-of-a-hr-like-line/2812813#2812813 — willoller, Sep 28 '12 at 23:40
Not quite willoller, question's pretty easy if you can introduce more HTML (as in that post) - this is challenge mode — Bilal Akil, Sep 28 '12 at 23:41

score 19 · Accepted Answer · answered Sep 28 '12 at 23:50

19

This works in Firefox:

.separator {
    text-align: center;
    height: 0.5em;
    border-bottom: 2px solid black;
    margin-bottom: 0.5em;
}
.separator:first-line {
    background-color: white;
}

JSFiddle Demo

answered Sep 28 '12 at 23:50

Neil

54,642
8
60
72

3

WOW That's really really close! HERE IS AN UPDATE: http://jsfiddle.net/LyKtp/1/ – willoller Sep 28 '12 at 23:59
+1 Not bad, works fine in chrome too. Only problem is you're forcing a background-color there. But if white is good, then it's probably just fine. – Tor Valamo Sep 28 '12 at 23:59
I'll answer this - just one more improvement would be fantastic: color:white; on the "__". I was able to inherit the background color for the .separator:first-line from the parent, but not the color:white. Any ideas? – Bilal Akil Sep 29 '12 at 00:02
2

Neil deserves the ups nice work everybody http://jsfiddle.net/LyKtp/2/ – willoller Sep 29 '12 at 00:02
@2unco I think you just have to set it the same as the body background-color. – willoller Sep 29 '12 at 00:04
My idea was to have it work in the variable case (background not specific), but I realise that's too much to ask. I guess that's as close as we can get then :D Excellent work guys! Nice nice – Bilal Akil Sep 29 '12 at 00:06
5

@2unco hex non breaking spaces! Check it: http://jsfiddle.net/gionaf/aSwhE/ :) – Giona Sep 29 '12 at 00:08
Hohoho GionaF :D How's that go for compatibility? All the way back I'd assume, just hex? – Bilal Akil Sep 29 '12 at 00:10
I'm still concerned about backwards compatibility for the general solution. Fancy stuff like this can't possibly go down well with IE... – Tor Valamo Sep 29 '12 at 00:11
@2unco i think if a browser supports `:first-line` , `:before` and `:after` ... it will have no issues with `\a0` – Giona Sep 29 '12 at 00:13
:first-line, :before and :after are supported in quirks mode, so that should work fine - what about the hex nbsp? I think that's a safe assumption too GionaF :D I think we've covered it, perfectly and absolutely! Well done guys! One great step forward for stylists :) – Bilal Akil Sep 29 '12 at 00:14
@2unco you can't write html entities in `content`. pseudo-selectors are not supported in IE7. As far as i know, IE8 supports hex characters so... – Giona Sep 29 '12 at 00:16
Yup, tested in IE8 :) it's...alive! – Giona Sep 29 '12 at 00:18
http://jsfiddle.net/8Y4sZ/ sooo close. Completely forgot how border-bottom worked haha – Bilal Akil Sep 29 '12 at 00:42
1

@2unco use `position:relative;` on .separate : http://jsfiddle.net/gionaf/shMCU/ – Giona Sep 29 '12 at 09:49
That fixes the overlapping - now just missing the background under the border - not sure how that'd work out. – Bilal Akil Oct 01 '12 at 03:30
Thanks @Giona, that line-height 0 thing really works. Not sure of browser support though. Any ideas? – PKHunter Jul 27 '14 at 04:09
1

@PKHunter line-height:0 work on any browser ;-) – Giona Jul 27 '14 at 10:09
1

Tweak to @willoller jfiddle, use content: "\00a0 \00a0"; for the :after and :before elements to insert spaces, rather than inserting '--' and having to make these a color. – kbrinner May 07 '15 at 18:31

score 4 · Answer 2 · answered Feb 03 '16 at 18:31

I have developed a solution that does not rely on a background: white, that is, you can see whats behind the separator's text. Just run the sample and you will see this:

Disregard all those messy tabs in this illustration... this is a CSS sample, not an organization sample.

.separator>*{
  display: inline-block;
  vertical-align: middle;
}
.separator {
    text-align: center;
    border: 0;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
.separator:before, .separator:after {
    content: "";
    height: 2px;
    width: 50%;
    background-color: gray;
    margin: 0 5px 0 5px;
    display: inline-block;
    vertical-align: middle;
}
.separator:before {
    margin-left: -100%;
}
.separator:after {
    margin-right: -100%;
}

<div class="texture texture1 dark-theme">
  <p class="separator">Text</p>
  <br/>
  <p class="separator"><span>Text with<br/>multiple lines</span></p>
</div>
<div class="texture texture2 dark-theme">
  <p class="separator">Text</p>
  <br/>
  <p class="separator"><span>Text with<br/>multiple lines</span></p>
</div>
<div class="texture texture3 dark-theme">
  <p class="separator">Text</p>
  <br/>
  <p class="separator"><span>Text with<br/>multiple lines</span></p>
</div>
<div class="texture texture4 light-theme">
  <p class="separator">Text</p>
  <br/>
  <p class="separator"><span>Text with<br/>multiple lines</span></p>
</div>

<style>
  
/**

STYLES TO MAKE THE BACKGROUND HAVE PATTERNS WHICH ARE NOT SOLID WHITE,
SO THAT YOU CAN SEE THAT IT IS VISIBLE BEHIND THE SEPARATOR.

**/

.light-theme .separator:before, .light-theme .separator:after {
  background-color: black;
}
.light-theme .separator, .light-theme .separator {
  color: black;
}
.dark-theme .separator:before, .dark-theme .separator:after {
  background-color: white;
}
.dark-theme .separator, .dark-theme .separator {
  color: white;
}

.texture {
  padding: 10px;
}

.texture3 {
  background-color: red;
  color: white;
}

.texture1 {
  //-webkit-box-sizing: content-box;
  //-moz-box-sizing: content-box;
  //box-sizing: content-box;
  //width: 320px;
  //height: 320px;
  //border: none;
  //font: normal 100%/normal Arial, Helvetica, sans-serif;
  //color: rgb(255, 255, 255);
  //-o-text-overflow: clip;
  //text-overflow: clip;
  background: -webkit-linear-gradient(63deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(-117deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(63deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(-117deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(0deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), -webkit-linear-gradient(-90deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
  background: -moz-linear-gradient(27deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(207deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(27deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(207deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(90deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), -moz-linear-gradient(180deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
  background: linear-gradient(27deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), linear-gradient(207deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), linear-gradient(27deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), linear-gradient(207deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), linear-gradient(90deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), linear-gradient(180deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
  background-position: 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: 20px 20px;
  background-size: 20px 20px;
}

.texture2 {
  //-webkit-box-sizing: content-box;
  //-moz-box-sizing: content-box;
  //box-sizing: content-box;
  //width: 320px;
  //height: 320px;
  //border: none;
  //font: normal 100%/normal Arial, Helvetica, sans-serif;
  //color: rgb(255, 255, 255);
  //-o-text-overflow: clip;
  //text-overflow: clip;
  background: -webkit-linear-gradient(0deg, rgba(255,255,255,0.0666667) 50%, rgba(0,0,0,0) 50%), -webkit-linear-gradient(0deg, rgba(255,255,255,0.129412) 50%, rgba(0,0,0,0) 50%), -webkit-linear-gradient(0deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.168627) 50%), -webkit-linear-gradient(0deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.188235) 50%), rgb(2, 104, 115);
  background: -moz-linear-gradient(90deg, rgba(255,255,255,0.0666667) 50%, rgba(0,0,0,0) 50%), -moz-linear-gradient(90deg, rgba(255,255,255,0.129412) 50%, rgba(0,0,0,0) 50%), -moz-linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.168627) 50%), -moz-linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.188235) 50%), rgb(2, 104, 115);
  background: linear-gradient(90deg, rgba(255,255,255,0.0666667) 50%, rgba(0,0,0,0) 50%), linear-gradient(90deg, rgba(255,255,255,0.129412) 50%, rgba(0,0,0,0) 50%), linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.168627) 50%), linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.188235) 50%), rgb(2, 104, 115);
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
  background-size: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
}

.texture4 {
  //-webkit-box-sizing: content-box;
  //-moz-box-sizing: content-box;
  //box-sizing: content-box;
  //width: 320px;
  //height: 320px;
  //border: none;
  //font: normal 100%/normal Arial, Helvetica, sans-serif;
  //color: rgba(255,255,255,1);
  //-o-text-overflow: clip;
  //text-overflow: clip;
  background: -webkit-linear-gradient(45deg, rgba(255,255,255,0.2) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 0), rgb(170, 204, 0);
  background: -moz-linear-gradient(45deg, rgba(255,255,255,0.2) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 0), rgb(170, 204, 0);
  background: linear-gradient(45deg, rgba(255,255,255,0.2) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 0), rgb(170, 204, 0);
  background-position: auto auto;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: 50px 50px;
  background-size: 50px 50px;
}
</style>

P.S.: The background examples I used are not my creations. I got them at enjoycss.com. The red background, well, it's also not my creation, neither their... nobody's creation, maybe. Who created red... I don't know. If you did, and I didn't give credit, please leave a note in the comments.

Wow, very impressive! You brought this back from the dead.. and killed it again! So if I understand correctly, it's using the `nowrap` and `overflow: hidden` so that those lines from the before/after are longer than they need to be, but you can't see that. Awesome stuff, and well done with the vertical alignment too! The `nowrap` brings a tad bit of HTML into the mix if you're intending on using a longer name, but it's great progress and very useful if you know that won't be a problem for ya. — Bilal Akil, Feb 03 '16 at 20:07
This should definitely be the accepted answer, this is awesome. Thanks for this. — Luke Ramsden, Sep 19 '18 at 10:05

score 1 · Answer 3 · answered Sep 28 '12 at 23:32

1

Sorry to break it to you, but there's no way to do this in HTML/CSS without introducing at least one additional tag.

The only thing that can approximate it, is using :before and :after pseudoclasses, but it has no way of inserting html content, much less content that has a variable width depending on the content.

answered Sep 28 '12 at 23:32

Tor Valamo

33,261
11
73
81

I'm worrying that this'll be the case. I resent it, but I may have to click this the answer! Hopefully some genius comes along with some ridiculous solution. I'll give it a day. – Bilal Akil Sep 28 '12 at 23:35

Giona · Answer 4 · 2012-09-29T09:50:09.323

1

There you go:

<p class="separator"></p>

p.separator {
    line-height:1em;
    border-bottom:1px solid red;
}
p.separator:before {
    content:"TEXT";
    position:relative;
    left:50%;
    margin-left:-2.5em; /* half the number of chars */
    padding:0 0.3em;
    top:0.5em;
    background:white;
}

Demo

edited Sep 29 '12 at 09:50

answered Sep 28 '12 at 23:35

Giona

20,734
4
56
68

caveat: does not use the content of the tag for the text... – Tor Valamo Sep 28 '12 at 23:37
@TorValamo i can work it out ;-) just a sec – Giona Sep 28 '12 at 23:37
Haha that's cool :) But not the answer :( As Tor Valamo said, needs to use the content of the tag - I've finally added an example problem to solve it on in the question:
CENTRE ME
. Thumbs up though – Bilal Akil Sep 28 '12 at 23:39
1

If you'd be willing to put CENTRE ME in an attribute, like
, the css could be content:attr(value);... but that's the only way. – Tor Valamo Sep 28 '12 at 23:41
Won't be doing that unfortunately. Lets wait and see what people come up with :) – Bilal Akil Sep 28 '12 at 23:44
@GionaF that's the same thing though... you just put TEXT in both places... – Tor Valamo Sep 28 '12 at 23:51
@TorValamo it wasn't in the requirements... No more HTML tags, and i've not used any ;-) – Giona Sep 28 '12 at 23:52
@GionaF that is true, but how does this help the actual problem? :P – Tor Valamo Sep 29 '12 at 00:02
@TorValamo there's no actual problem, it's just a challenge! – Giona Sep 29 '12 at 00:02
@GionaF he did mention it was for work. – Tor Valamo Sep 29 '12 at 00:13

score 1 · Answer 5 · edited May 23 '17 at 12:09

1

You could use a background image for the line, then give the text a series of black text-shadows to emulate a 2-3px stroke, covering the background immediately surrounding and between the text.

Ie. CSS Font Border?

http://jsfiddle.net/4mPkU/ - Example

Backward compatibility will be an issue based on text-shadow support. (There is an IE filter which might help with compatibility).

edited May 23 '17 at 12:09

Community

1
1

answered Sep 29 '12 at 06:27

Nw167

169
5

PS. Tested this and it works quite effectively. – Nw167 Sep 29 '12 at 06:29
You reckon you could crop up a jsfiddle for that? Checked out that link and now I'm not sure that I'm on the same page. The comments for the accepted answer may give you more of an idea of what I'm looking for (especially the later comments) – Bilal Akil Oct 01 '12 at 03:29
Added an example. Just re-read the original question and noticed that you did say no CSS3, so this solution probably isn't ideal. Interesting solution however. It did occur to me though, if the 'seperate' element will always contain the same word, why not use a background image with the adequate gap in the white line? Does it need to adapt to suit different widths? – Nw167 Oct 01 '12 at 09:02
Yup different widths, ideally different everything – Bilal Akil Oct 03 '12 at 10:52

score 1 · Answer 6 · answered May 21 '19 at 11:31

.center-separator {
    display: flex;
  line-height: 1em;
  color: gray;
}

.center-separator::before, .center-separator::after {
    content: '';
    display: inline-block;
    flex-grow: 1;
    margin-top: 0.5em;
    background: gray;
    height: 1px;
    margin-right: 10px;
    margin-left: 10px;
  }

https://jsfiddle.net/0Lkj6wd3/

score 0 · Answer 7 · answered Sep 28 '12 at 23:25

To make something dynamic you could do something like:

<ul>
    <li>
        <div class='lineLeft'></div>
        <div class='inlineText'></div>
        <div class=lineRight'></div>
    </li>
</ul>

Basically here you would style the 'inlineText' div to be centered (doesn't have to be a div, now, just an idea), and then the 'lineLeft' and 'lineRight' would both be styled float left/right accordingly, with a height set to half of the height of the parent list item tag. Then give each side div a bottom border in css.

That's the most dynamic solution I can think of off the top of my head. It's a little bit more HTML but it would achieve your goals properly assuming you could get everything to size correctly.

Let us know. Good luck.

Yup I got that far myself, but wasn't happy with the fact that I had to add more HTML. I'm sort of a perfectionist, haha sorry about that - looking for the optimal solution. I hope I don't have to resort to something like this as a worst case scenario, but thanks for the help :) — Bilal Akil, Sep 28 '12 at 23:27

CSS challenge, can I do this without introducing more HTML?

7 Answers7

Linked

Related