Multiline Link Formatting Conundrum

Question

On a webpage, I have markup like the following:

<h3>Title Goes here</h3>
<a href="...">Link goes here</a>
<h3>Next title</h3>
<a href="...">Next link</a>

Some of these links have very long text and span multiple lines. I would like the following to occur:

1. There is spacing between the first heading's link and the second heading.
2. Links that span multiple lines have all lines but the first indented.

The way that this is accomplished currently is through the following CSS:

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;
}

The problem comes in because our links have the following formatting:

a {
    color: #900;
    text-decoration: none;
    border-bottom: 1px dotted #333;
}

a:hover {
    border-bottom: 1px solid #900;
}

Since the links under the headings have display: inline-block, 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 display:inline-block seems necessary to get the margins and indenting that I want, but the border-bottom would only work with an inline element.

Is there a way to have my cake and underline it too, without altering the markup (eg wrapping the <a> elements with <p>)?

Answer 1

Shouldn't you just need to alter the line-height to be lower than 1.4? If not, please provide a visual.

Answer 2

I was able to use position: relative and a negative margin to achieve the indenting effect without resorting to text-indent, which required the inline-block. I added margins to the headers instead of the links in order to create the necessary spacing. The CSS is as follows:

h2 + a, h3 + a, h4 + a, h5 + a, h6 + a {
    line-height:1.4;
    margin-left: -10px;
    position: relative;
    left: 15px;
}

a+h2, a+h3, a+h4, a+h5, a+h6 {
    margin-top: 20px;
}