CSSのテキストの前に線を引く方法は？

Question

私は文章を持っています私たちについて私はdraw a blue line の前に私がしたいWebページにあります。ウェブページにはfiddleがあります。私はセレクタを使ってCSSでそれを達成するにはどうすればいいでしょうか？またはそれを達成するためにCSSの他の方法私が使用しています

私達についてのためのHTMLコードをセクションでは、次のとおりです。

<div class="about-homesail"> 
    <p class="headline-text">About Us</p> 
    <p class="company-info">aha hahahah ahahahhaha hahhahhahh hahahhh hhhahah hha hahhha hahhhah ahhhhahah ahhhhhhahq...</p> 
</div> 

Answer 1

テキストに影響を与えない境界線を収容する擬似要素を作成するために:beforeを使用することができます。

.about-homesail .headline-text:before { 
    border-top: 1px solid #1072B8; 
    display: block; 
    position: relative; 
    top: -25px; 
    margin: 0 auto; 
    width: 50%; 
    content: ""; 
} 

https://jsfiddle.net/3fruwccb/

Answer 2

あなたは私たちとのセットについて色の前に行を挿入するために、セレクタの前に使用します。青。

https://www.w3schools.com/cssref/sel_before.asp

Answer 3

::beforeセレクターを使用します。このような何か。 これは、選択された要素の最初の子である擬似要素を作成します。これは、コンテンツプロパティを持つ要素に化粧品のコンテンツを追加するためによく使用されます。

あなたは以下のコードを使用することができます

.headline-text::before { 
     content: ""; 
     position: absolute; 
     width: 100%; 
     border-bottom: 1px solid blue; 
     } 

Learn more

Answer 4

をここでの方法のすべてです：https://jsfiddle.net/sheriffderek/feqfj54o/

<hr /> 

<h2 class='special-heading'>I'm a level 2 heading</h2> 

<section class='section-name'> 
    <h2>Some text...</h2> 

    <p>Some stuff in a section</p> 
</section> 


<section class='with-before-element'> 
    <h2>Section using a 'before' or 'after' psuedo element</h2> 
</section> 

...

hr { 
    border: 0; 
    height: 1px; 
    background: red; 
} 


.special-heading { 
    border-top: 1px solid blue; 
} 

.section-name { 
    border-top: 1px solid green; 
} 


.with-before-element { 
    position: relative; 
    padding-top: 5px; 
} 

.with-before-element:before { 
    display: block; 
    content: ''; 
    /* these 'psuedo' elements need a content declaration even if you don't have any.... */ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 1px; 
    background: orange; 
}