css – 线前后的图片标题

前端之家收集整理的这篇文章主要介绍了css – 线前后的图片标题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在中心标题之前和之后创建一行。线条和文字必须具有透明背景才能将其放置在不均匀的背景上。该行不能为100%宽度,如下所示:

标题文字可以改变:

标题的宽度是未知的
>标题可以跨越几行

h1 {
  text-align: center;
  border-bottom: 1px solid #000;
}
<h1>Today</h1>

解决方法

您可以使用两个伪元素和边框在标题的两边做一行:

>这个工作在一个透明的背景(线条和标题有透明的背景)。
>线长度将适应标题宽度,因此无论标题长度如何,它们始终处于同一位置。
>标题可以跨越几行,而左和右线保持垂直居中(请注意,您需要将标题包含在< span>标签中才能工作。请参阅演示)

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
 body {
  background-image: url(http://i.imgur.com/EzOh4DX.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  font-family: 'Open Sans',sans-serif;
}
h1 {
  width: 70%;
  margin: .7em auto;
  overflow: hidden;
  text-align: center;
  font-weight:300;
  color: #fff;
}
h1:before,h1:after {
  content: "";
  display: inline-block;
  width: 50%;
  margin: 0 .5em 0 -55%;
  vertical-align: middle;
  border-bottom: 1px solid;
}
h1:after {
  margin: 0 -55% 0 .5em;
}
span {
  display: inline-block;
  vertical-align: middle;
}
<h1>Today</h1>
<h1>Today news</h1>
<h1><span>Today<br/>news</span></h1>
原文链接:https://www.f2er.com/css/219832.html

猜你在找的CSS相关文章