Question

我试图根据文字的宽度创建一些文本标题，这些文字标题的边线是动态的。

实施例： enter image description here

我猜测我需要在标题上做某种背景颜色（例如白色）来伪装它，然后使用:before伪类，但是到目前为止，我还没能把它拉下来。

HTML（至少目前）只是一个基本的标题标记：

<h3>This is some text</h3>

如果可能，我真的想避免添加其他HTML元素。

Answer 1

我遇到了一些很好的例子this website。有一个使用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中使用。请查看链接，还有更多示例。

Answer 2

<div><h3>Text</h3></div>

为div添加背景，为h3添加白色背景。

创建具有基于文本的动态宽度的边框/线

2 个答案: