Multiline Ссылка Форматирование Conundrum

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 кажется необходимым получить поля и отступы, которые я хочу, но нижняя граница будет работать только с встроенным элементом.

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

Answer 1

Я смог использовать position: relative и отрицательный запас для достижения отступающего эффекта, не прибегая к текстовому отступу, который требовал встроенного блока. Я добавил поля в заголовки вместо ссылок, чтобы создать необходимый интервал. 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? Если нет, укажите визуальный характер.