html 宽度包含边框,html – 带边框线的文字并占用剩余宽度

参见英文答案 >

Border line next to text                                    5个

如何使用纯CSS实现文本和右边界线？检查下面的示例图像.

身体有一个背景图像.我使用:: after制作了这行,但我无法动态计算左边文本和边框线之间的间隙.如果文本是静态的,我可以为间隙设置固定的宽度.但是当文本是动态的时候我怎么能这样做呢？

body,html{

height: 100%;

}

body{

background-image: url(http://webneel.com/wallpaper/sites/default/files/images/01-2014/7-flower-wallpaper.jpg);

}

h1{

font-size: 30px;

text-transform: uppercase;

color: #fff;

position: relative;

}

h1::after{

position: absolute;

content: '';

width: 80%;

left: 160px;

bottom: 5px;

background-color: #fff;

height: 1px;

}

About us