Centered Text With Background Color All The Way Right

I was asked to code an unusual shape background color on some centered text. The text should be centered and it's background color should continue all the way right of the parent

Solution 1:

You can use a pseudo element to make the black background continue on the right :

DEMO

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;
}

Solution 2:

I don't understand well your problem, but try to mix these concepts:

HTML:

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

JS:

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

try to change the son and the parent colors.