Créer une ligne après le texte avec css

Im essayant de faire une ligne après chacune de mes balises h2. Je ne peux pas comprendre comment je devrait dire à la largeur, à cause de la longueur de la h2 titres est diffèrent de h2 h2.

- Je utiliser l' :après la méthode pour créer des lignes

       h2:after {
       position: absolute;
       content: "";
       height: 2px;
       background-color: #242424;
       width: 50%;
       margin-left: 15px;
       top: 50%;
       }

Vérifier le code ici: http://jsfiddle.net/s9gHf/
Comme vous pouvez le voir la ligne d'arriver trop large, et de rendre le site trop large.

source d'informationauteur user3026212

  1. 28

    Vous pourriez réaliser avec un supplément de <span>:

    HTML

    <h2><span>Featured products</span></h2>
<h2><span>Here is a very long h2, and as you can see the line get too wide</span></h2>

    CSS

    h2 {
    position: relative;
}

h2 span {
    background-color: white;
    padding-right: 10px;
}

h2:after {
    content:"";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.5em;
    border-top: 1px solid black;
    z-index: -1;
}

    http://jsfiddle.net/myajouri/pkm5r/

    Une autre solution, sans l'excès de <span> mais qui nécessite une overflow: hidden sur le <h2>:

    h2 {
    overflow: hidden;
}

h2:after {
    content:"";
    display: inline-block;
    height: 0.5em;
    vertical-align: bottom;
    width: 100%;
    margin-right: -100%;
    margin-left: 10px;
    border-top: 1px solid black;
}

    http://jsfiddle.net/myajouri/h2JRj/

  2. 1

    à l'aide de flexbox:

    h2 {
    display: flex;
    align-items: center;

}

h2 span {
    content:"";
    flex: 1 1 auto;
    border-top: 1px solid #000;
}

    html:

    <h2>Title <span></span></h2>
  3. 1

    Ici en est une autre, à mon avis, encore plus simple solution à l'aide d'un flex wrapper:

    HTML:

    <div class="wrapper">
  <p>Text</p>
  <div class="line"></div>
</div>

    CSS:

    .wrapper {
  display: flex;
  align-items: center;
}

.line {
  border-top: 1px solid grey;
  flex-grow: 1;
  margin: 0 10px;
}

    JSFiddle

  4. 0

    Ici est de savoir comment je le fais:
    http://jsfiddle.net/Zz7Wq/2/

    Je utiliser un arrière-plan au lieu de après et utiliser mon H1 ou H2 pour couvrir le fond. Pas tout à fait votre méthode ci-dessus, mais fonctionne bien pour moi.

    CSS

    .titre de la boîte { background: #fff url('images/bar-orange.jpg') repeat-x left; text-align: left; margin-bottom: 20px;} 
.titre de la boîte de h1 { color: #000; background-color: #fff; display: inline; padding: 0 50px 0 50px; }

    HTML

    <div class="title-box"><h1>Title can go here</h1></div>
<div class="title-box"><h1>Title can go here this one is really really long</h1></div>