Testo centrato con colore di sfondo tutto a destra - html, css, testo, sfondo, colore di sfondo

Mi è stato chiesto di codificare un colore di sfondo a forma insolita su un testo centrato.

Il testo dovrebbe essere centrato e il suo colore di sfondo dovrebbe continuare fino all'elemento principale.

Ecco l'output desiderato:

Non ho mai visto nulla di simile, quindi non so nemmeno da dove cominciare. Grazie per il tuo aiuto!

risposte:

2 per risposta № 1

Puoi usare uno pseudo elemento per far continuare lo sfondo nero a destra:

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

---

0 per risposta № 2

Non capisco bene il tuo problema, ma provo a mescolare questi concetti:

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>

prova a cambiare i colori figlio e genitore.

---