Background color for two spans, need to fill the space in between as with the same color

Question

https://codepen.io/Deepu55555/pen/YBQxYd

HTML

<h1>Background Color</h1>

<div>Set a background color for a div element.</div>

<p>Set a <span>background</span> <span>color</span> for only a part of a text.</p>

CSS

body {
  background-color: #fefbd8;
}

h1 {
  background-color: #80ced6;
}

div {
  background-color: #d5f4e6;
}

span {
  background-color: #f18973;
}

I have two spans and assigned background color for both of them, is there any way I could fill the extra space with the same background color as the previous one? so that the background color doesn't separate between two spans?

@MohitGupta I am unable to use the same when I have a block element as it only highlights the first element and leaves the second element in the next line — , Feb 04 '19 at 06:29

score 3 · Answer 1 · answered Feb 04 '19 at 06:10

3

You Can use One span for that two words so it will fill the color between space

body {
  background-color: #fefbd8;
}

h1 {
  background-color: #80ced6;
}

div {
  background-color: #d5f4e6;
}

span {
  background-color: #f18973;
}

<h1>Background Color</h1>

<div>Set a background color for a div element.</div>

<p>Set a <span>background color</span> for only a part of a text.</p>

answered Feb 04 '19 at 06:10

Asad

124
1
9

I am not looking for a solution which as a single span as that's not my requirement :( sorry. – Feb 04 '19 at 06:30
1

you can also do the same by removing space between the span tag like the following code
Set a background color for only a part of a text.
– Asad Feb 04 '19 at 06:58

score 1 · Answer 2 · answered Feb 04 '19 at 06:18

1

Hope you need to avoid the empty space between "background" and "color". If so you can wrap those two "span" element with a parent "span".

<p>Set a <span>
<span>background</span> <span>color</span>    
</span> for only a part of a text.</p>

answered Feb 04 '19 at 06:18

Rajesh

254
1
6

Code_Ninja · Accepted Answer · 2019-02-04T06:36:54.890

If you just the following way of writing your code, then you can solve the issue:

body {
  background-color: #fefbd8;
}

h1 {
  background-color: #80ced6;
}

div {
  background-color: #d5f4e6;
}

span {
  background-color: #f18973;
}

<h1>Background Color</h1>

<div>Set a background color for a div element.</div>

<p>Set a <span>background </span><span>color</span> for only a part of a text.</p>

This will work if you are working on static data, if you working with dynamic data then also, you can manage the spaces using this same representation.

EDIT #1:

Or instead of the following line:

<p>Set a <span>background </span><span>color</span> for only a part of a text.</p>

You can use the following:

<p>Set a <span>background color</span> for only a part of a text.</p>

EDIT #2:

Add the following to your CSS:

span::before{
  content: " ";
}

And change the following line:

<p>Set a <span>background </span> <span>color</span> for only a part of a text.</p>

to (remove space between the spans):

<p>Set a <span>background </span><span>color</span> for only a part of a text.</p>

Then, the solution would appear like the following:

body {
  background-color: #fefbd8;
}

h1 {
  background-color: #80ced6;
}

div {
  background-color: #d5f4e6;
}

span {
  background-color: #f18973;
}

span::before {
  content: " ";
}

<h1>Background Color</h1>

<div>Set a background color for a div element.</div>

<p>Set a <span>background</span><span>color</span> for only a part of a text.</p>

I think this is an interesting solution to solve such simple problem btw thanks will try doing this, do you have any other solution for the same instead of using a parent span ? — , Feb 04 '19 at 06:28
Do you want to use a coding solution for this issue? I can provide you with one, but it would be wastage of effort, since there is no point in making a simple solution complex. — Code_Ninja, Feb 04 '19 at 06:30
If that uses javascript and CSS together please give let me know the alternative way of doing the same as I am dealing with block elements and this might not work in some cases. — , Feb 04 '19 at 06:33

score 1 · Answer 4 · answered Feb 04 '19 at 06:57

You can also do the same thing by removing space between span

body {
  background-color: #fefbd8;
}

h1 {
  background-color: #80ced6;
}

div {
  background-color: #d5f4e6;
}

span {
  background-color: #f18973;
}

<h1>Background Color</h1>

<div>Set a background color for a div element.</div>

<p>Set a <span>background</span><span> color</span> for only a part of a text.</p>

Background color for two spans, need to fill the space in between as with the same color

4 Answers4