Databases
StackOverflow2013
Postsdbo
POCSS To Add Underline After Header Content
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS To Add Underline After Header Content
    text
    copied!<p><strong>Problem</strong></p> <p>I am working on a project to theme a website, but I am not allowed to change the HTML or JavaScript. I can only update the CSS stylesheet and add/update images.</p> <p><strong>Requrements</strong></p> <ul> <li>I need to style a h3 tag to have an underline/border after the content. </li> <li>This h3 will be used multiple times on the page, so the conent length can vary </li> <li>The solution needs to be cross-browser (IE 6/7/8, FF 3, &amp; Safari)</li> </ul> <p><strong>Sample Code</strong></p> <pre><code>&lt;div class="a"&gt; &lt;div class="b"&gt;&lt;!-- etc --&gt;&lt;/div&gt; &lt;div class="c"&gt; &lt;h3&gt;Sample Text To Have Line Afterwards&lt;/h3&gt; &lt;ul&gt;&lt;!-- etc --&gt;&lt;/ul&gt; &lt;p class="d"&gt;&lt;!-- etc --&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>Sample Output</strong></p> <pre> Sample Text to Have Line Afterwards ______________________________________ Another Example __________________________________________________________ And Yet Another Example __________________________________________________ </pre> <p><strong>Notes</strong></p> <ul> <li>I think #sample:after { content: "__________"; } option wouldn't work since that would only be the correct length for one of the tags</li> <li>I tried a background-image, but if it gave me problems if I gave it one with a large width</li> <li>Using text-indent didn't see to give me the effect I was looking for</li> <li>I tried a combination of border-bottom and text-decoration: none, but that didn't seem to work either</li> </ul> <p><strong><em>Any ideas would be much appreciated!</em></strong></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload