Databases
StackOverflow2013
Postsdbo
POMultiline Link Formatting Conundrum
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMultiline Link Formatting Conundrum
    text
    copied!<p>On a webpage, I have markup like the following:</p> <pre><code>&lt;h3&gt;Title Goes here&lt;/h3&gt; &lt;a href="..."&gt;Link goes here&lt;/a&gt; &lt;h3&gt;Next title&lt;/h3&gt; &lt;a href="..."&gt;Next link&lt;/a&gt; </code></pre> <p>Some of these links have very long text and span multiple lines. I would like the following to occur:</p> <ol> <li>There is spacing between the first heading's link and the second heading.</li> <li>Links that span multiple lines have all lines but the first indented.</li> </ol> <p>The way that this is accomplished currently is through the following CSS:</p> <pre><code>h2 + a, h3 + a, h4 + a, h5 + a, h6 + a { margin: 0px 30px 20px 5px; line-height:1.4; display: inline-block; padding-left: 10px; text-indent: -10px; } </code></pre> <p>The problem comes in because our links have the following formatting:</p> <pre><code>a { color: #900; text-decoration: none; border-bottom: 1px dotted #333; } a:hover { border-bottom: 1px solid #900; } </code></pre> <p>Since the links under the headings have <code>display: inline-block</code>, the border-bottom does not go under the text of each line, but rather under the whole box that the link generates. I'm not sure if there is way to get what I want here, since <code>display:inline-block</code> seems necessary to get the margins and indenting that I want, but the border-bottom would only work with an inline element.</p> <p>Is there a way to have my cake and underline it too, without altering the markup (eg wrapping the <code>&lt;a&gt;</code> elements with <code>&lt;p&gt;</code>)? </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