Overlapping HTML Markup

Question

I would like to have three numbers (or words or whatever) with the first two surrounded by a red box and the second two surrounded by a green box. So the boxes will overlap. Is this possible in html/css? I have a semi-legal attempt in the snippet which hopefully gets across what I want, though of course it doesn't work. If possible I would like to avoid absolute positioning or anything like that as I really want to use these elements to mark up the text, and plan to read that markup back later.

.red {
    border-style: solid;
    border-color: red;
    padding: 4px;
}
.green {
    border-style: solid;
    border-color: green;
}

1 2 3                              <br /><br />
<span class="red">1 2</span> 3     <br /><br />
1 <span class="green">2 3</span>   <br /><br />
<span1 class="red"">1 <span2 class="green">2</span1> 3</span2>

This is approximately I want it to look like:

Answer 1

You want to deliberately break the XML format in your XHTML. And have the browser interpret the borders on elements correctly? It was common back in the day with things like <b class="red"">1 <u class="green">2</b> 3</u> and you'll see that is 'closer' to what you want but the browsers now a days fill in these gaps in display and force the proper foratting when adding the CSS. So you're left with having to do CSS hacks...

sorry it seems that :first-of-type and :last-of-type don't like to be added to 2 classes like .red.green:first-of-type so I had to add them in as first and last in the classes

(You can find the overlap by seeing which elements have both classes)

    	.numbersContainer {
    	  position: relative;
    	  margin: 12px;
    	}
    	.red {
    	  border-top-style: solid;
    	  border-bottom-style: solid;
    	  border-color: red;
    	  padding: 4px;
    	}
    	.green {
    	  border-top-style: solid;
    	  border-bottom-style: solid;
    	  border-color: green;
    	}
    	.red.green:before {
    	  content: " ";
    	  position: absolute;
    	  z-index: -1;
    	  top: 0px;
    	  left: 0px;
    	  right: 0px;
    	  bottom: 0px;
    	  border-top-style: solid;
    	  border-bottom-style: solid;
    	  border-color: green;
    	  padding: 4px;
    	}
    	.red.green {
    	  position: relative;
    	  border-top-style: solid;
    	  border-bottom-style: solid;
    	  border-color: red;
    	  padding: 4px;
    	}
    	.numbersContainer .red:first-of-type {
    	  border-left-style: solid;
    	}
    	.numbersContainer .red:last-of-type {
    	  border-right-style: solid;
    	}
    	.numbersContainer .green:first-of-type {
    	  border-left-style: solid;
    	}
    	.numbersContainer .green:last-of-type {
    	  border-right-style: solid;
    	}
    	.first {
    	  border-left-style: solid;
    	}
    	.last {
    	  border-right-style: solid;
    	}
    	.red.green.first {
    	  border-left-style: none;
    	}
    	.red.green.first:before {
    	  border-left-style: solid;
    	}
    	.red.green.last {
    	  border-right-style: solid;
    	}
    	.red.green.last:before {
    	  border-right-style: none;
    	}
    	

<div class="numbersContainer">
  1 2 3
</div>
<div class="numbersContainer">
  <span class="red">1 2</span> 3
</div>
<div class="numbersContainer">
  1 <span class="green">2 3</span> 
</div>
<div class="numbersContainer">
  <span class="red">1 </span><span class="red green first last">2</span><span class="green">3</span>
</div>
<div class="numbersContainer">
  <span class="red">1 </span><span class="red green first">2</span><span class="red green">3</span><span class="red green">4</span><span class="red green last">5</span><span class="green">6</span>
</div>

Answer 2

It is possible, but it is not very good coding style. If you change the text, you must also change the padding and margin of .green.

.red {
  border-style: solid;
  border-color: red;
  padding: 4px;
  width: 16px;
}
.green {
  border-style: solid;
  border-color: green;
  padding: 2px 4px 2px 24px;
  margin-left: -20px;
}

<span class="red">1 2</span><span class="green">3</span>