多線鏈接的格式難題

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似乎有必要獲得我想要的邊距和縮進，但邊界底部只能使用內聯元素。

有沒有辦法讓我的蛋糕也強調它，而不改變標記（例如用<p>包裝<a>元素）？

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嗎？如果沒有，請提供一個視覺。