Css 当背景设置动画以增大尺寸时，背景不会100%延伸到框的左侧

我试图得到一个框扩大的大小，而离开文本中心。我的问题是：当框展开时，我在框标题部分使用的背景不会100%向左延伸

我认为这可能与下面的代码有关，在“悬停模式”中，我为左边和上面的边距加上了-5px，以便框从中间开始扩展（这是因为宽度和高度扩展了10px）：

有关其余代码和示例，请参见以下内容：

《N.b.》的解决方法必须确保文本在放大时保持在盒子的中间，就像上面的小提琴一样。只需将宽度更改为100%，文本就会相对于框的中间向左移动（展开后）

---

将宽度更改为100%。这将使其在悬停时完全向左延伸。

替换

宽度：290px至<代码>宽度：100%。并删除
#textArea
和
#headingArea


顺便说一下，
background color:none
是一个错误。你的意思是背景色：透明。这个解决方案唯一的问题是文本相对于方框向左移动。如果你看我张贴的原始小提琴，文本停留在中间。@ JunnBooY，请检查上面的链接。“JonnyBoy有帮助吗？几乎。唯一的问题是文本在框变大时会重新格式化-我编辑了你的提琴以显示以下内容：。看看“katirpied”如何改变线条。。。。要阻止这一切吗？就这样。您是如何做到的？@urnostam此解决方案唯一的问题是文本相对于方框向左移动。如果你看我张贴的原始小提琴，文本停留在中间。
.serviceBox1 {
        width:290px;
        height:282px;
        position:absolute;
        margin: 0px;
        overflow: hidden ;
        }

            .serviceBox1Hover {
                width:300px;
                height:292px;
                margin-left: -5px; 
                margin-top: -5px;
                }

        .serviceBox1Text {
            width:100%;
            margin: 0 auto;
        }

.serviceBox1Text {
    width: 100%;
    margin: 0 auto;
}