始终将背景颜色居中的文本 [英] 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 element.

这是所需的输出:

我从未见过这样的事情，所以我什至不知道从哪里开始.谢谢您的帮助！

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

推荐答案

您可以使用伪元素使黑色背景在右侧继续:

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

这篇关于始终将背景颜色居中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！