gpt4 book ai didi

html - 创建具有基于文本的动态宽度的边框/线条

转载 作者:行者123 更新时间:2023-11-28 15:36:37 28 4
gpt4 key购买 nike

我正在尝试创建一些文本标题,这些标题的一侧有一条线,该线基于文本的宽度是动态的。

例子: enter image description here

我猜我需要在标题上做一些背景颜色(例如白色)来伪造它,然后使用 :before伪类,但到目前为止我还没有成功。

HTML(至少目前)只是一个基本的标题标签:

<h3>This is some text</h3>

如果可能的话,我真的很想避免添加额外的 HTML 元素。

最佳答案

我遇到了 this website有几个很好的例子。有一个使用 before 的示例伪类,但它确实有一个额外的 <span>元素。尽管如此,这是一个很好的起点。这个可能对你有用(但是它确实包含一个额外的元素):

CSS:

<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

body { font-family: "Helvetica", sans-serif; text-align: center; background: transparent; padding: 10px 40px;}

p {
text-align: left;
margin-bottom: 30px;
line-height: 20px;
}

h1 {
text-align:left;
position: relative;
margin-top: 10px;
margin-left: 0;
}

h1.two span {
background: #fff;
padding: 0 10px;
position: relative;
z-index: 10;
}

h1.two+p {
border-top: solid 1px black;
padding-top: 40px;
margin-top: -40px;
}

</style>

正文:

<body>
<h1 class="two"><span>Heading Number Two</span></h1>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</body>

似乎在 Safari 中工作。请检查链接,还有更多示例。

关于html - 创建具有基于文本的动态宽度的边框/线条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8401976/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com