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

概述参见英文答案 > Border line next to text                                    5个 如何使用纯CSS实现文本和右边界线？检查下面的示例图像. 身体有一个背景图像.我使用:: after制作了这行,但我无法动态计算左边文本和边框线之间的间隙.如果文本是静态的,我可以为间隙设置固定的宽度.但是当文本是动态的时候我怎么能这样做呢？ body, 参见英文答案 > 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;}

<h1>About us</h1>

解决方法 尝试使用flexBox.设置他h1显示：flex,它将文本“关于我们”和:: after伪元素转换为flex项目,flex：1在第二个上用于获取最大剩余宽度可用.最后,根据需要调整位置.

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;  display: flex;}h1::after {  flex: 1;  content: '';  border-bottom: 1px solID #fff;  position: relative;  left: 6px;  top: -6px;}

<h1>About us</h1>

总结

以上是内存溢出为你收集整理的html – 带边框线的文字并占用剩余宽度全部内容，希望文章能够帮你解决html – 带边框线的文字并占用剩余宽度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。