Центриран текст с цвят на фона докрай - html, css, текст, фон, цвят на фона

Бях помолен да кодирам необичаен цвят на фона на някакъв центриран текст.

Текстът трябва да е центриран и цветът му на фона трябва да продължи докрай вдясно от родителския елемент.

Ето желания резултат:

Никога не съм виждал нещо подобно, така че дори не знам откъде да започна. Благодаря ви за помощта ви!

Отговори:

2 за отговор № 1

Можете да използвате псевдо елемент, за да направите черен фон да продължи вдясно:

ДЕМОНСТРАЦИЯ

HTML:

<div>
<span>Some text with</span><br/>
<span>unusual background</span><br/>
<span>color</span>
</div>

CSS:

div{
float:right;
padding-right:150px;
text-align:center;
position:relative;
}

span{
display:inline-block;
background:#000;
color:#fff;
line-height:1.4em;
margin:0;
}
span:after{
content:"";
position:absolute;
width:200px;
height:1.4em;
right:0;
background:inherit;
z-index:-1;
}

---

0 за отговор № 2

Не разбирам добре проблема ви, но се опитайте да смесвате тези понятия:

HTML:

 <div id="parent">
<p id="son">Some text with unusual background color</p>
</div>

JS:

<script type="text/javascript">
document.getElementsById("parent").style.background="red";
document.getElementsById("son").style.background="blue";
</script>

опитайте да промените цвета на синьото и родителя.

---