位置の相対的な位置で絶対位置のテキストに罫線を追加

Question

私は現在、位置：絶対の位置にあるテキストの相対位置である画像を上部に持つウェブサイトを設計中です。

「連絡先」に罫線を追加しようとすると、画像との相対的な位置のため、隙間が下部にあります。国境が「連絡先」の周りを回るようにするにはどうすればいいですか？

What happens now
What I want

コード：

HTML：

<main> 
    <div class="relative"> 
     <img id="headerImage" src="http://www.yugangliang.com/Library/DHTML/Gal_JJP/Photos/Joseph_Johnson_VA_Richmond_Elevated_RR_View_2100x802.jpg" alt="bridge"/> 
     <p class="absolute-text" id="fontStyle">HAPPY NATIONAL PI DAY + 0.01.</p> 
     <a class="absolute-text" id="fontStyle2" href="contact.html">CONTACT</a> 
    </div> 
</main> 

CSS：

#headerImage { 
    width: 100%; 
    height: 600px; 
} 

.relative{ 
    position:relative; 
    width:100%; 
} 

.absolute-text { 
    color: white; 
    position:absolute; 
    bottom:0; 
    /*padding:220px 20px;*/ 
    top: 150px; 
    width:100%; 
    text-align:center; 
    font-family: 'Roboto', sans-serif; 
} 

#fontStyle { 
    font-weight: 900; 
    font-size: 64px; 
} 

#fontStyle2 { 
    font-size: 25px; 
    /*border: 2px solid #fff !important;*/ 
    text-decoration: none; 
    font-weight: 400; 
    top: 290px; 
    /*padding-top: 155px;*/ 
} 

Answer 1

はこの方法であなたの#fontStyle2 CSSルールを設定してください：

#fontStyle2 { 
    font-size: 25px; 
    border: 2px solid #fff !important; 
    text-decoration: none; 
    font-weight: 400; 
    top: 290px; 
    width: auto; 
    left: 50%; 
    height: 30px; 
    padding: 0 10px; 
    transform: translateX(-50%); 
}