Создайте границу / линию, которая имеет динамическую ширину на основе текста - PullRequest
Новая
       5

Создайте границу / линию, которая имеет динамическую ширину на основе текста

0 голосов
/ 06 декабря 2011

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

Пример: enter image description here

Полагаю, мне понадобится какой-нибудь цвет фона для заголовка (например, белый), чтобы имитировать его, а затем использовать псевдокласс :before, но пока я не был в состоянии осуществить это.

HTML (по крайней мере, на данный момент) - это просто базовый тег заголовка:

<h3>This is some text</h3>

Я бы очень хотел по возможности избежать добавления дополнительных элементов HTML.

Ответы [ 2 ]

0 голосов
/ 06 декабря 2011

Я встречал этот сайт с несколькими хорошими примерами. Есть пример использования псевдокласса before, но у него есть дополнительный элемент <span>. Тем не менее, это хорошее место для начала. Возможно, этот вариант подойдет вам (однако он содержит дополнительный элемент):

CSS: 

<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }

  body { font-family: "Helvetica", sans-serif; text-align: center; background: transparent; padding: 10px 40px;}

  p {
    text-align: left;
    margin-bottom: 30px;
    line-height: 20px;
  }

  h1 {
    text-align:left;
    position: relative;
    margin-top: 10px;
    margin-left: 0;
  }

  h1.two span {
    background: #fff;
    padding: 0 10px;
    position: relative;
    z-index: 10;
  }

  h1.two+p {
    border-top: solid 1px black;
    padding-top: 40px;
    margin-top: -40px;
  }

</style>

Основной корпус: 

<body>
  <h1 class="two"><span>Heading Number Two</span></h1>

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</body>

Появляется для работы в Safari. Пожалуйста, проверьте ссылку, есть еще примеры.

0 голосов
/ 06 декабря 2011 
<div><h3>Text</h3></div>

Добавить фон с линией для div, белый фон для h3.

...