Comment dessiner une ligne avant un texte en CSS?

Question

J'ai un texte Sur nous sur une page Web dans laquelle je veux draw a blue line avant elle. Voici la fiddle pour la page Web. Je me demande comment puis-je utiliser les sélecteurs pour y parvenir en CSS? ou tout autre moyen en CSS pour y parvenir?

Le code HTML pour la section A propos de nous que je me sers est:

<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

Vous pouvez utiliser :before pour créer un pseudo-élément qui abrite la frontière, qui n'affecterait pas le texte. Quelque chose comme ceci:

.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

Vous utilisez le sélecteur avant d'insérer une ligne avant la A propos de nous et jeu de couleurs: bleu;

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

Answer 3

Utilisez le sélecteur ::before. Il crée un pseudo-élément qui est le premier enfant de l'élément sélectionné. Il est souvent utilisé pour ajouter du contenu cosmétique à un élément avec la propriété content.

Vous pouvez utiliser le code suivant:

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

Learn more

Answer 4

Voici toutes les façons: 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; 
}