Не могу объединить ссылку и <hr>

[Ly3ePo4eK]

Есть код:
 

    <a href="">ССЫЛКА<hr></a>

 
Надо объединить слово "ССЫЛКА" и тег <hr>, чтобы при наведении/нажатии оба элемента меняли цвет!

 

Не разобрался как тут прикреплять изображение, поэтому вот ↓↓↓ такую штуку хочу сделать!

 

                                                                              https://yadi.sk/i/_wE4O4gTnfSqD

 

Может есть другой вариант, без использования <hr>?  

[lexxcode]

text-decoration: underline;

[parliament]

 может быть так

Edited January 24, 2016 by parliament

[Ly3ePo4eK]

text-decoration: underline;

если так, то как опустить линию подчеркивания ниже?

 может быть так

спасибо!) 

[ishurgaya]

 

text-decoration: underline;

если так, то как опустить линию подчеркивания ниже?

 

при использовании text-decoration: underline; , то никак .

 

используйте способ ,который предложил parliament. 

отступ там задан так: padding-bottom: 10px;

[Ly3ePo4eK]

 

 

text-decoration: underline;

если так, то как опустить линию подчеркивания ниже?

 

при использовании text-decoration: underline; , то никак .

 

используйте способ ,который предложил parliament. 

отступ там задан так: padding-bottom: 10px;

 

Это я понял, padding даже не нужен(задана высота блока, и он автоматически становится в самый низ) а вот как изменить длину этой линии? Если она должна быть короче чем сам блок?

[wwt]

 

 

 

text-decoration: underline;

если так, то как опустить линию подчеркивания ниже?

 

при использовании text-decoration: underline; , то никак .

 

используйте способ ,который предложил parliament. 

отступ там задан так: padding-bottom: 10px;

 

Это я понял, padding даже не нужен(задана высота блока, и он автоматически становится в самый низ) а вот как изменить длину этой линии? Если она должна быть короче чем сам блок?

 

https://jsfiddle.net/wwt/9drz35yr/1/