Создать строку после текста с помощью css

Я пытаюсь сделать строку после каждого из моих тегов h2. Я не могу понять, как мне сказать ширину, потому что длина заголовков h2 отличается от h2 до h2.

Я использую метод after: для создания строк

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

Проверить код здесь: http://jsfiddle.net/s9gHf/ Как видите, линия становится слишком широкой и делает сайт слишком широким.

Ответы

Ответ 1

Вы можете достичь этого с помощью дополнительного <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/

Другое решение без дополнительного <span>, но для <h2> требуется overflow: hidden:

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

с помощью 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

Вот еще одно, на мой взгляд, еще более простое решение с использованием flex-оболочки:

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

Вот как я это делаю: http://jsfiddle.net/Zz7Wq/2/

Вместо фона используйте фон и использую H1 или H2 для покрытия фона. Не совсем ваш метод выше, но хорошо работает для меня.

CSS

.title-box { background: #fff url('images/bar-orange.jpg') repeat-x left; text-align: left; margin-bottom: 20px;}
.title-box 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>

Ответ 5

Это самый простой способ, который я нашел для достижения результата: просто используйте тег hr перед текстом и установите верхнюю границу для текста. Очень коротко и легко понять! jsfiddle

h2 {
  background-color: #ffffff;
  margin-top: -22px;
  width: 25%;
}

hr {
  border: 1px solid #e9a216;
}

<br>

<hr>
<h2>ABOUT US</h2>

Ответ 6

Больше нет необходимости в дополнительных обертках или элементах span. Flexbox и Grid могут легко справиться с этим.

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

h2::after {
  content: '';
  flex: 1;
  margin-left: 1rem;
  height: 1px;
  background-color: #000;
}

<h2>Heading</h2>