背景颜色居中的文本一直向右答案

【问题标题】：Centered text with background color all the way right背景颜色居中的文本一直向右
【发布时间】：2014-09-05 09:23:37
【问题描述】：

我被要求在一些居中的文本上编写一个不寻常的形状背景颜色。

文本应该居中，并且它的背景颜色应该一直延续到父元素的右侧。

这是所需的输出：

我从来没有见过这样的事情，所以我什至不知道从哪里开始。感谢您的帮助！

【问题讨论】：

将您的图片上传到imgur.com 等网站，然后在您的问题中发布链接。有人会为你编辑它。
问题不清楚。 Jsfiddle.net'sfiddle可以说清楚。
图片如下：link

标签： html css text background background-color

【解决方案1】：

我不太理解你的问题，但尝试混合这些概念：

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>

尝试改变儿子和父母的颜色。

【讨论】：

【解决方案2】：

你可以使用伪元素让黑色背景在右边继续：

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

【讨论】：

哇，谢谢，这正是我想要的，我也喜欢这个解决方案！