Centered text with background color all the way ri

Question

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 element.

Here is the desired output :

I have never seen anything like this so I don't even know where to start. Thank you for your help!

Answer 1

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:

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

try to change the son and the parent colors.

Answer 2

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