Загадка многострочного форматирования ссылок

Question

На веб-странице у меня есть разметка, подобная следующей:

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

Некоторые из этих ссылок имеют очень длинный текст и занимают несколько строк. Я хотел бы, чтобы произошло следующее:

1. Между ссылками первой и второй заголовков есть интервал.
2. Ссылки, которые охватывают несколько строк, имеют все строки, кроме первого отступа.

Способ, которым это выполняется в настоящее время, заключается в следующем 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;
}

Проблема возникает, потому что наши ссылки имеют следующий формат:

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

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

Поскольку ссылки под заголовками имеют display: inline-block, граница снизу идет не под текстом каждой строки, а под целым полем, которое генерирует ссылка. Я не уверен, есть ли способ получить то, что я хочу здесь, так как display:inline-block кажется необходимым, чтобы получить поля и отступы, которые я хочу, но border-bottom будет работать только со встроенным элементом.

Есть ли способ получить мой торт и подчеркнуть его, не изменяя разметку (например, обернуть элементы <a> <p>)?

Answer 1

Мне удалось использовать position: relative и отрицательное поле для достижения эффекта отступа, не прибегая к text-indent, что требовало встроенного блока. Я добавил поля в заголовки вместо ссылок, чтобы создать необходимый интервал. CSS выглядит следующим образом:

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

Answer 2

Разве вам не нужно просто изменить высоту строки ниже 1,4? Если нет, просьба предоставить визуальное представление.