CSS在标题后显示边框
CSS在标题后显示边框
提问于 2018-08-14 22:37:35
我想要一个如图所示的标题
。
目前我有3个flex列：
<section id="section1" class="py-5">
<div class="container">
<div class="d-flex">
<div class="p-2 w-50 text-center"><h1>OUR DIVISIONS</h1></div>
<div class="p-2 w-25 text-center"><h1>Sample Heading 2</h1></div>
<div class="p-2 w-25 text-center">Sample Heading 3</div>
</div>
</div>
</section>如图所示，我需要在标题中使用OUR____线条效果。
任何帮助都将不胜感激。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-16 01:51:00
下面是我对动态宽度所做的工作：
<section id="section1" class="py-5">
<div class="container">
<div class="d-flex">
<div class="p-2 w-50">
<h1 class="heading">
<span class="heading1">OUR</span>
<br>
<span class="heading2">DIVISIONS</span>
</h1>
</div>
<div class="p-2 w-25 text-center"><h1>Sample Heading 2</h1></div>
<div class="p-2 w-25 text-center">Sample Heading 3</div>
</div>
</div>
</section>使用的CSS：
.heading{
overflow: hidden;
margin-bottom: 0;
font-weight: normal;
display: inline-block;
}
.heading2{
font-size: 2.5rem;
font-weight: 500;
}
.heading span.heading1:after{
content:'';
display:inline-block;
width:100%; height:100%;
margin-right:-100%;
border-bottom:2px solid #000;
margin-left: 5px;
}希望这对某些人也有帮助。
Stack Overflow用户
发布于 2018-08-15 18:06:40
因此，我会尝试使用:after元素。
我想到的最好的想法是：
.underline:after {
content: "";
border-bottom: 1px black solid;
display: inline-block;
width: 85px;
}<div style="display: inline-block">
<h1 class="underline">
our
</h1>
<h1>
Divisions
</h1>
</div>
唯一的问题是，宽度被固定为85px。因此，对于其他标题，您需要调整宽度
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51843983
复制相关文章
相似问题