単語、限られた長さ、中央に下の境界線を使用する方法は？

Question

thisページの下部に、著作権テキストの下の灰色の線を30％に設定しようとしています。そのため、テキストよりも短くなっています。私の問題は、テキストの長さよりも小さい％に設定すると、テキストを2行に置きます。私はテキストを1行にしたい。

著作権ボックスコード：

.copyright-container{ 
 
\t box-sizing: border-box; 
 
padding-right:20px;padding-left:20px; 
 
background-color: black; 
 
text-align: center; 
 
position:relative; 
 
bottom:0; 
 
width:100%; 
 
height:220px; 
 
    color: white; 
 
} 
 

 
.vert-align{ 
 
position: relative; 
 
top: 50%; 
 
} 
 
.headline { 
 
    width: 30%; 
 
    line-height: 1.5em; 
 
    border-bottom:2px solid #6d6666; 
 
    margin:0px auto; 
 
    color:white; 
 
}

その他のコード：

<div class="copyright-container"> 
 
\t \t <div class="vert-align"> 
 
\t \t \t <p class="headline">Copyright &copy; 2017 RyanTeaches - All Rights Reserved.</p> 
 
\t \t </div> 
 
\t </div>

私はHTMLに新たなんだとCSS

の多くのおかげで、 ライアン

Answer 1

あなたがpseudoelementsを使用することができます。

.headline:before { 
    content: ""; 
    position: absolute; 
    left: 43%; 
    bottom: 0; 
    height: 1px; 
    width: 15%; 
    border-bottom: 1px solid #6d6666; 
} 

Answer 2

あなたがテキストに割り当てられたスタイルプロパティでそれを行うことができなくなります。しかし、以下に示すように、あなたはそれを行うことができます。

.headline { 
 
    line-height: 1.5em; 
 
    margin: 0px auto; 
 
    color: black; 
 
    text-align: center; 
 
} 
 

 
.headline_under { 
 
    border-bottom: 1px solid black; 
 
    max-width: 120px; 
 
    margin: 0 auto; 
 
    margin-top: 10px; 
 
}

<p class="headline">Copyright © 2017 RyanTeaches - All Rights Reserved.</p> 
 
<div class="headline_under"></div>

Answer 3

.headline { 
 
    
 
    line-height: 2.5em; 
 
    margin:0px auto; 
 

 
} 
 

 
.headline:before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 40%; 
 
    bottom: 0; 
 
    height: 1px; 
 
    width: 20%; 
 
    border-bottom: 2px solid #6d6666; 
 
    color:white; 
 
}

この組み合わせは私のためにそれをソート！君たちありがとう！

1行のコードを使用して、これをすべてのページに挿入します。私はPHPを使用することはできません。もし私がJSを書くにはどうすればいいですか？

乾杯！