blocks|key|4082627|text|因此，我会尝试使用:after元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4082628|我想到的最好的想法是：|4082629|​|4082630|.underline:after+{
++content:+"";
++border-bottom:+1px+black+solid;
++display:+inline-block;
++width:+85px;
}|code-block|syntax|javascript|4082631|<div+style="display:+inline-block">
++<h1+class="underline">
++++our
++</h1>
++<h1>
++++Divisions
++</h1>
</div>|4082632|4082633|唯一的问题是，宽度被固定为85px。因此，对于其他标题，您需要调整宽度|4082634|entityMap^0|9|6|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|Z|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|10|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|11|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|12|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|13|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|U|$]]

<p>So I would try it with an <code>:after</code> element.</p>

<p>The best think I came up is:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.underline:after {
  content: "";
  border-bottom: 1px black solid;
  display: inline-block;
  width: 85px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="display: inline-block"&gt;
  &lt;h1 class="underline"&gt;
    our
  &lt;/h1&gt;
  &lt;h1&gt;
    Divisions
  &lt;/h1&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>The only problem with this is, the width is set fixed to 85px. So with other headlines you need to adapt the width</p>


blocks|key|4082670|text|下面是我对动态宽度所做的工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4082671|<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>|code-block|syntax|javascript|4082672|使用的CSS：|4082673|.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%25;+height:100%25;
++++margin-right:-100%25;
++++border-bottom:2px+solid+#000;
++++margin-left:+5px;
}|4082674|希望这对某些人也有帮助。|4082675|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Here is what I did for dynamic width:</p>

<pre><code>&lt;section id="section1" class="py-5"&gt;
    &lt;div class="container"&gt;
        &lt;div class="d-flex"&gt;
            &lt;div class="p-2 w-50"&gt;
                &lt;h1 class="heading"&gt;
                    &lt;span class="heading1"&gt;OUR&lt;/span&gt;
                    &lt;br&gt;
                    &lt;span class="heading2"&gt;DIVISIONS&lt;/span&gt;
                &lt;/h1&gt;
            &lt;/div&gt;
            &lt;div class="p-2 w-25 text-center"&gt;&lt;h1&gt;Sample Heading 2&lt;/h1&gt;&lt;/div&gt;
            &lt;div class="p-2 w-25 text-center"&gt;Sample Heading 3&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/section&gt;
</code></pre>

<p>CSS used:</p>

<pre><code>.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;
}
</code></pre>

<p>Hope this helps someone too...</p>


<p>I want a heading like shown in the picture <a href="https://i.stack.imgur.com/yQ4gJ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yQ4gJ.jpg" alt="picture"></a>.</p>

<p>Currently I have 3 flex columns:</p>

<pre><code>&lt;section id="section1" class="py-5"&gt;
    &lt;div class="container"&gt;
        &lt;div class="d-flex"&gt;
            &lt;div class="p-2 w-50 text-center"&gt;&lt;h1&gt;OUR DIVISIONS&lt;/h1&gt;&lt;/div&gt;
            &lt;div class="p-2 w-25 text-center"&gt;&lt;h1&gt;Sample Heading 2&lt;/h1&gt;&lt;/div&gt;
            &lt;div class="p-2 w-25 text-center"&gt;Sample Heading 3&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/section&gt;
</code></pre>

<p>As shown in the picture, I need the OUR____ line effect in the heading.</p>

<p>Any help will be much appreciated.</p>


CSS Show border after heading

我想要一个如图所示的标题。目前我有3个flex列：<section id="section1" class="py-5">    <div class="container">        <div class="d-flex">            <div class="p-2 w-50 text-center...

问CSS在标题后显示边框
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS在标题后显示边框EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS在标题后显示边框
EN