Question

我试图像照片那样做，但我真的不知道该怎么做

所以我应该可以在中间添加任何有趣的图标。

这是我的初始标记：

<h1>Welcome</h1>

h1 {
    font-size: 25pt;
    display: inline-block;
    margin: 0;
    font-weight: 300;
}
h1:after {
    content: '\f209';
    font-family: FontAwesome;
    display: block;
}

Here my fiddle

希望你能提供帮助。

Answer 1

通过向h1 border-bottom提供:after并将h1 { font-size: 25pt; display: inline-block; margin: 0; font-weight: 300; padding-bottom: 10px; border-bottom: 1px solid #000; } h1:after { content: '\f209'; position: absolute; font-family: FontAwesome; background-color: #FFF; display: block; margin-left: 50px; }图标绝对放在其中心。同时应用白色背景以确保线条中断。

<html>
    <head></head>
    <body>
        <form method="post" action="page.php?placeid=2">
            <button class="yesbtn" type="submit">Yes</button>
        </form>
    </body>
</html>

Update fiddle

Answer 2

嗯......接受的答案工作正常，但它涉及设置宽度，需要重写以满足标题中较长的文本。无论文本的宽度如何，以下都有效（但它确实涉及更多的HTML）：

https://jsfiddle.net/jx4dv11g/3/

＆＃13;

h1 {
    font-size: 25pt;
    margin: 0 auto;
    font-weight: 300;
    padding-bottom: 10px;
    border-bottom: 1px solid #000;
    text-align: center;
    display: inline-block;
}

.headericon {
  display: inline-block;
  position: absolute;
}
.headericon i {
  display: block;
  margin-top: -25%;
  background: white;
  transform: translate(-50%,0);
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<h1>Welcome to this page<br><span class="headericon"><i class="fa fa-hand-peace-o"></i></span></h1>

＆＃13;

Answer 3

我建议您使用以下HTML结构：

<h1 class="styled-heading">
  Welcome to HTML and CSS

  <span class="fa fa-hand-peace-o"></span>
</h1>

在h1上应用课程，并使用伪元素:before和:after在图标周围绘制线条。

这将允许您为网页中的所有类似位置设置一次通用样式。如果你想在其他标题中使用不同的图标，那么你只需要更改该标题中的字体真棒图标。

＆＃13;

body {
  text-align: center;
  margin: 0;
}
.styled-heading {
  text-align: center;
  font-size: 25pt;
  display: inline-block;
  margin: 0;
  font-weight: 300;
  position: relative;
  overflow: hidden;
}

.styled-heading .fa {
  display: block;
  margin: 0 auto;
}

.styled-heading:before,
.styled-heading:after {
  position: absolute;
  background: black;
  margin-left: 30px;
  width: 999px;
  height: 1px;
  content: '';
  bottom: 12px;
  left: 50%;
}
.styled-heading:after {
  margin-right: 30px;
  margin-left: 0;
  right: 50%;
  left: auto;
}

.orange {
  background: orange;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<h1 class="styled-heading">
  Welcome to HTML and CSS
  <span class="fa fa-hand-peace-o"></span>
</h1>

<div class="orange">
  <h1 class="styled-heading">
    Welcome To HTML and CSS.
    <span class="fa fa-home"></span>
  </h1>
</div>
<div class="blue">
  <h1 class="styled-heading">
    Welcome To HTML and CSS.
    <span class="fa fa-globe"></span>
  </h1>
</div>
<div class="green">
  <h1 class="styled-heading">
    Welcome To HTML and CSS.
    <span class="fa fa-power-off"></span>
  </h1>
</div>

＆＃13;

如何在中间带有字体真棒图标的标题后创建一条线？

3 个答案: